KnockoutJS - Abhängigkeitsverfolgung

KnockoutJs verfolgt automatisch die Abhängigkeiten, wenn die Werte aktualisiert werden. Es hat ein einzelnes Objekt namensdependency tracker (ko.dependencyDetection), das als Zwischenprodukt zwischen den beiden Parteien zum Abonnieren der Abhängigkeiten fungiert.

Im Folgenden finden Sie den Algorithmus für die Abhängigkeitsverfolgung.

Step 1 - Immer wenn Sie ein berechnetes Observable deklarieren, ruft KO sofort seine Evaluatorfunktion auf, um seinen Anfangswert zu erhalten.

Step 2- Das Abonnement wird für alle vom Evaluator gelesenen Beobachtungen eingerichtet. In einer Anwendung werden die alten Abonnements, die nicht mehr verwendet werden, entsorgt.

Step 3 - KO benachrichtigt schließlich das aktualisierte berechnete Observable.

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

Führen Sie die folgenden Schritte aus, um zu sehen, wie der obige Code funktioniert:

Speichern Sie den obigen Code in dependency_tracking.htm Datei.
Öffnen Sie diese HTML-Datei in einem Browser.
Geben Sie einen beliebigen Fruchtnamen ein und klicken Sie auf die Schaltfläche Hinzufügen.

Steuern von Abhängigkeiten mit Peek

Auf das Computed Observable kann zugegriffen werden, ohne eine Abhängigkeit zu erstellen, indem Sie das verwenden peekFunktion. Es steuert das Observable durch Aktualisieren der berechneten Eigenschaft.

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

Führen Sie die folgenden Schritte aus, um zu sehen, wie der obige Code funktioniert:

Speichern Sie den obigen Code in dependency_tracking_peek.htm Datei.
Öffnen Sie diese HTML-Datei in einem Browser.

Beobachtungen

Ignorieren von Abhängigkeiten innerhalb einer berechneten Abhängigkeit

Das ko.ignoreDependenciesMit dieser Funktion können Sie die Abhängigkeiten ignorieren, die Sie in den berechneten Abhängigkeiten nicht verfolgen möchten. Es folgt die Syntax.

ko.ignoreDependencies( callback, callbackTarget, callbackArgs );

Warum kreisförmige Abhängigkeiten nicht sinnvoll sind

Wenn KO ein berechnetes Observable auswertet, wird eine Auswertung des abhängigen berechneten Observable nicht neu gestartet. Daher ist es nicht sinnvoll, Zyklen in Ihre Abhängigkeitsketten aufzunehmen.