KnockoutJS - Theo dõi sự phụ thuộc

KnockoutJs tự động theo dõi các phụ thuộc khi các giá trị được cập nhật. Nó có một đối tượng duy nhất được gọi làdependency tracker (ko.dependencyDetection) hoạt động như một trung gian giữa hai bên để đăng ký các phụ thuộc.

Sau đây là thuật toán để theo dõi sự phụ thuộc.

Step 1 - Bất cứ khi nào bạn khai báo một hàm quan sát được tính toán, KO ngay lập tức gọi hàm đánh giá của nó để lấy giá trị ban đầu của nó.

Step 2- Đăng ký được thiết lập cho bất kỳ người đánh giá nào có thể quan sát được. Trong một ứng dụng, các đăng ký cũ không còn được sử dụng sẽ được xử lý.

Step 3 - Cuối cùng KO thông báo cập nhật tính toán quan sát được.

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

Hãy thực hiện các bước sau để xem mã trên hoạt động như thế nào -

Lưu mã trên vào dependency_tracking.htm tập tin.
Mở tệp HTML này trong trình duyệt.
Nhập tên trái cây bất kỳ và nhấp vào nút Thêm.

Kiểm soát sự phụ thuộc bằng Peek

Có thể truy cập Computed Observable mà không cần tạo phụ thuộc, bằng cách sử dụng peekchức năng. Nó điều khiển Observable bằng cách cập nhật thuộc tính được tính toán.

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

Hãy thực hiện các bước sau để xem mã trên hoạt động như thế nào -

Lưu mã trên vào dependency_tracking_peek.htm tập tin.
Mở tệp HTML này trong trình duyệt.

Quan sát

Bỏ qua phụ thuộc trong phụ thuộc được tính toán

Các ko.ignoreDependencieshàm giúp bỏ qua những phụ thuộc mà bạn không muốn theo dõi trong các phụ thuộc được tính toán. Sau đây là cú pháp của nó.

ko.ignoreDependencies( callback, callbackTarget, callbackArgs );

Tại sao sự phụ thuộc vòng tròn không có ý nghĩa

Nếu KO đang đánh giá một Có thể quan sát được tính toán, thì nó sẽ không bắt đầu lại đánh giá Đối tượng có thể quan sát được tính toán phụ thuộc. Do đó, không có ý nghĩa gì khi bao gồm các chu kỳ trong chuỗi phụ thuộc của bạn.