KnockoutJS-종속성 추적

KnockoutJs는 값이 업데이트되면 종속성을 자동으로 추적합니다. 라는 단일 객체가 있습니다.dependency tracker (ko.dependencyDetection) 종속성을 구독하기 위해 두 당사자 사이의 중간 역할을합니다.

다음은 종속성 추적을위한 알고리즘입니다.

Step 1 − 계산 된 Observable을 선언 할 때마다 KO는 즉시 평가 기능을 호출하여 초기 값을 얻습니다.

Step 2− 구독은 평가자가 읽는 관찰 가능 항목으로 설정됩니다. 응용 프로그램에서 더 이상 사용되지 않는 이전 구독은 삭제됩니다.

Step 3 − KO는 마지막으로 업데이트 된 계산 된 관찰 가능 항목을 알립니다.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>KnockoutJS How Dependency Tracking Works</title>
      <!-- CDN's-->
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <div>
         <form data-bind = "submit: addFruits">
            <b>Add Fruits:</b>
            <input data-bind = 'value: fruitToAdd, valueUpdate: "afterkeydown"'/>
            <button type = "submit" data-bind = "enable: fruitToAdd().length > 0">Add</button>
            <p><b>Your fruits list:</b></p>
            <select multiple = "multiple" width = "50" data-bind = "options: fruits"> </select>
         </form>
      </div>
      
      <script>
         var Addfruit = function(fruits) {
            this.fruits = ko.observableArray(fruits);
            this.fruitToAdd = ko.observable("");
            
            this.addFruits = function() {
               
               if (this.fruitToAdd() != "") {
                  this.fruits.push(this.fruitToAdd());   // Adds a fruit
                  this.fruitToAdd("");                   // Clears the text box
               }
                
            }.bind(this);                                // "this" is the view model
         };

         ko.applyBindings(new Addfruit(["Apple", "Orange", "Banana"]));
      </script>
      
   </body>
</html>

Output

위의 코드가 어떻게 작동하는지보기 위해 다음 단계를 수행해 보겠습니다.

위의 코드를 dependency_tracking.htm 파일.
브라우저에서이 HTML 파일을 엽니 다.
과일 이름을 입력하고 추가 버튼을 클릭합니다.

Peek를 사용하여 종속성 제어

Computed Observable은 종속성을 생성하지 않고 액세스 할 수 있습니다. peek함수. 계산 된 속성을 업데이트하여 Observable을 제어합니다.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>KnockoutJs Controlling Dependencies Using Peek</title>
      <!-- CDN's-->
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <div class = "logblock">
         <h3>Computed Log</h3>
         <pre class = "log" data-bind = "html: computedLog"></pre>
      </div>

      <script>
         function AppData() {
            this.firstName = ko.observable('John');
            this.lastName = ko.observable('Burns');
            this.computedLog = ko.observable('Log: ');
            
            this.fullName = ko.computed(function () {
               var value = this.firstName() + " " + this.lastName();
               this.computedLog(this.computedLog.peek() + value + '; <br/>');
               return value;
            }, this);

            this.step = ko.observable(0);
            this.next = function () {
               this.step(this.step() === 2 ? 0 : this.step()+1);
            };
         };
         
         ko.applyBindings(new AppData());
      </script>
      
   </body>
</html>

Output

위의 코드가 어떻게 작동하는지보기 위해 다음 단계를 수행해 보겠습니다.

위의 코드를 dependency_tracking_peek.htm 파일.
브라우저에서이 HTML 파일을 엽니 다.

관찰

계산 된 종속성 내에서 종속성 무시

그만큼 ko.ignoreDependencies함수는 계산 된 종속성 내에서 추적하지 않으려는 종속성을 무시하는 데 도움이됩니다. 다음은 구문입니다.

ko.ignoreDependencies( callback, callbackTarget, callbackArgs );

순환 종속성이 의미가없는 이유

KO가 Computed Observable을 평가하는 경우 종속 Computed Observable의 평가를 다시 시작하지 않습니다. 따라서 종속성 체인에주기를 포함하는 것은 의미가 없습니다.