KnockoutJS - Suivi des dépendances

KnockoutJs suit automatiquement les dépendances lorsque les valeurs sont mises à jour. Il a un seul objet appelédependency tracker (ko.dependencyDetection) qui sert d'intermédiaire entre les deux parties pour la souscription des dépendances.

Voici l'algorithme de suivi des dépendances.

Step 1 - Chaque fois que vous déclarez une observable calculée, KO appelle immédiatement sa fonction évaluatrice pour obtenir sa valeur initiale.

Step 2- L'abonnement est mis en place à toute observable que l'évaluateur lit. Dans une application, les anciens abonnements qui ne sont plus utilisés sont supprimés.

Step 3 - KO notifie enfin l'observable calculée mise à jour.

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

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code ci-dessus dans dependency_tracking.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

  • Entrez un nom de fruit et cliquez sur le bouton Ajouter.

Contrôle des dépendances à l'aide de Peek

L'observable calculée est accessible sans créer de dépendance, en utilisant le peekfonction. Il contrôle l'Observable en mettant à jour la propriété calculée.

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

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code ci-dessus dans dependency_tracking_peek.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

Observations

Ignorer les dépendances dans une dépendance calculée

le ko.ignoreDependenciesLa fonction permet d'ignorer les dépendances que vous ne souhaitez pas suivre dans les dépendances calculées. Voici sa syntaxe.

ko.ignoreDependencies( callback, callbackTarget, callbackArgs );

Pourquoi les dépendances circulaires ne sont pas significatives

Si KO évalue une observable calculée, il ne redémarrera pas une évaluation de l'observable calculée dépendante. Par conséquent, il n'a pas de sens d'inclure des cycles dans vos chaînes de dépendances.