KnockoutJS - Bağımlılık İzleme

KnockoutJs, değerler güncellendiğinde bağımlılıkları otomatik olarak izler. Adında tek bir nesnesi vardependency tracker (ko.dependencyDetection) bağımlılıklara abone olmak için iki taraf arasında bir aracı görevi görür.

Bağımlılık izleme algoritması aşağıdadır.

Step 1 - Hesaplanmış bir gözlemlenebilir ilan ettiğinizde, KO, başlangıç değerini almak için hemen değerlendirici fonksiyonunu çağırır.

Step 2- Abonelik, değerlendiricinin okuduğu herhangi bir gözlemlenebilir olana ayarlanmıştır. Bir uygulamada, artık kullanılmayan eski abonelikler atılır.

Step 3 - KO nihayet güncellenmiş hesaplanmış gözlemlenebilir olanı bilgilendirir.

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

Yukarıdaki kodun nasıl çalıştığını görmek için aşağıdaki adımları uygulayalım -

Yukarıdaki kodu şuraya kaydedin: dependency_tracking.htm dosya.
Bu HTML dosyasını bir tarayıcıda açın.
Herhangi bir meyve adı girin ve Ekle düğmesini tıklayın.

Peek Kullanarak Bağımlılıkları Kontrol Etme

Computed Observable'a, bir bağımlılık oluşturmadan, peekişlevi. Hesaplanan özelliği güncelleyerek Gözlemlenebilir'i kontrol eder.

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

Yukarıdaki kodun nasıl çalıştığını görmek için aşağıdaki adımları uygulayalım -

Yukarıdaki kodu şuraya kaydedin: dependency_tracking_peek.htm dosya.
Bu HTML dosyasını bir tarayıcıda açın.

Gözlemler

Hesaplanmış Bağımlılık İçerisindeki Bağımlılıkları Yoksaymak

ko.ignoreDependenciesişlevi, hesaplanan bağımlılıklar içinde izlemek istemediğiniz bağımlılıkları görmezden gelmenize yardımcı olur. Söz dizimi aşağıdadır.

ko.ignoreDependencies( callback, callbackTarget, callbackArgs );

Döngüsel Bağımlılıklar Neden Anlamlı Değil?

KO, bir Hesaplanmış Gözlenebilirliği değerlendiriyorsa, bağımlı Hesaplanmış Gözlemlenebilir'in bir değerlendirmesini yeniden başlatmayacaktır. Bu nedenle, bağımlılık zincirlerinize döngüleri dahil etmenin bir anlamı yoktur.