knockout.js 튜토리얼 => knockout.js 시작하기

비고

이 섹션에서는 knockout.js가 무엇인지, 왜 개발자가 그것을 사용하고 싶어하는지에 대한 개요를 제공합니다.

또한 knockout.js 내의 큰 주제를 언급하고 관련 주제에 링크해야합니다. knockout.js에 대한 문서는 새로운 문서이기 때문에 관련 주제의 초기 버전을 만들어야 할 수도 있습니다.

버전

번역	노트	출시일
3.4.2	버그 수정	2017-03-06
3.4.1	버그 수정	2016-11-08
3.4.0		2015-11-17
3.3.0		2015-02-18
3.2.0	도입 된 `component` 바인딩	2014-08-12
3.1.0		2014-05-14
3.0.0	또한보십시오 : 업 그레 이드 (2.x에서) 노트	2013-10-25
2.3.0	마지막 2.x 릴리스	2013-07-08
2.0.0		2011 년 12 월 21 일
1.2.1	마지막 1.x 버전	2011-05-22
1.0.0		2010-07-05

설치 또는 설정

녹아웃은 대부분의 JavaScript 플랫폼 또는 독립 실행 형 스크립트에서 사용할 수 있습니다.

스크립트로 포함

다운로드 페이지 에서 스크립트를 다운로드 한 다음 페이지에 표준 script tag 를 포함시킬 수 있습니다.

<script type='text/javascript' src='knockout-3.4.0.js'></script>

CDN 사용

Microsoft CDN 또는 CDNJS의 녹 아웃을 포함 할 수도 있습니다

<script type='text/javascript' src='//ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>

또는

<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js'></script>

npm에서 설치

npm install knockout

선택적으로 --save 매개 변수를 추가하여 package.json 파일에 유지할 수 있습니다.

정박소에서 설치

bower install knockout

선택적으로 --save 매개 변수를 추가하여 bower.json 파일에 유지할 수 있습니다

NuGet에서 설치

Install-Package knockoutjs

시작하기 : Hello world!

HTML 문서 만들기 및 knockout.js 사용

HTML 파일을 만들고 knockout.js 를 <script> 태그를 통해 포함시킵니다.

<!DOCTYPE html>
<html>
<head>
    <title>Hello world! (knockout.js)</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
</body>
</html>

녹아웃 스크립트 아래에 두 번째 <script> 태그를 추가하십시오. 이 스크립트 태그에서 뷰 모델을 초기화하고 문서에 데이터 바인딩 을 적용 합니다 .

<script>
  var ViewModel = function() {
    this.greeting = ko.observable("Hello");
    this.name = ko.observable("World");

    this.appHeading = ko.pureComputed(function() {
      return this.greeting() + ", " + this.name() + "!";
    }, this);
  };

  var appVM = new ViewModel();

  ko.applyBindings(appVM);
</script>

이제 HTML을 본문에 추가하여 보기 를 계속 만듭니다.

<section>
  <h1 data-bind="text: appHeading"></h1>
  <p>Greeting: <input data-bind="textInput: greeting" /></p>
  <p>Name: <input data-bind="textInput: name" /></p>
</section>

HTML 문서가 열리고 스크립트가 실행되면 Hello, World! 라는 페이지가 표시됩니다 . . <input> 요소에서 단어를 변경하면 <h1> 텍스트가 자동으로 업데이트됩니다.

생성 된 파일의 작동 방식

녹아웃의 디버그 버전이 외부 소스 (cdnjs)에서로드됩니다.

암호:

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>

관찰 가능한 속성이있는 뷰 모델 인스턴스가 만들어집니다. 이는 녹아웃이 변경 사항을 감지하고 이에 따라 UI를 업데이트 할 수 있음을 의미합니다.

암호:

var appVM = new ViewModel();

녹아웃은 DOM에 data-bind 특성을 확인하고 제공된 viewmodel을 사용하여 UI를 업데이트합니다.

암호:

ko.applyBindings(appVM);

text 바인딩을 만났을 때 knockout은 바운드 viewmodel에 정의 된대로 속성 노드의 값을 사용하여 텍스트 노드를 삽입합니다.

암호:

<h1 data-bind="text: appHeading"></h1>

Computed Observables

Computed Observable은 뷰 모델에서 다른 관측 대상을 "볼 수 있거나"반응 할 수있는 함수입니다. 다음 예에서는 전체 사용자 수와 평균 연령을 표시하는 방법을 보여줍니다.

참고 : 아래 예제는 다른 뷰 모델 속성을 기반으로 무언가를 계산하고 값을 반환하기 때문에 pureComputed () (v3.2.0에서 도입 )를 사용할 수도 있습니다.

<div>
  Total Users: <span data-bind="text: TotalUsers">2</span><br>
  Average Age: <span data-bind="text: UsersAverageAge">32</span>
</div>

var viewModel = function() {

    var self = this;

    this.Users = ko.observableArray([
        { Name: "John Doe", Age: 30 },        
        { Name: "Jane Doe", Age: 34 }
    ]);

    this.TotalUsers = ko.computed(function() {
        return self.Users().length;
    });

    this.UsersAverageAge = ko.computed(function() {
        var totalAge = 0;
        self.Users().forEach(function(user) {
            totalAge += user.Age;
        });
   
        return totalAge / self.TotalUsers();
    });
};

ko.applyBindings(viewModel);

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

knockout.js 튜토리얼
knockout.js 시작하기

수색…

비고

버전