KnockoutJS - Seguimiento de dependencias

KnockoutJs rastrea automáticamente las dependencias cuando los valores se actualizan. Tiene un solo objeto llamadodependency tracker (ko.dependencyDetection) que actúa como intermediario entre las dos partes para suscribir las dependencias.

A continuación se muestra el algoritmo para el seguimiento de dependencias.

Step 1 - Siempre que declara un observable calculado, KO invoca inmediatamente su función de evaluador para obtener su valor inicial.

Step 2- Se establece la suscripción a cualquier observable que lea el evaluador. En una aplicación, se eliminan las suscripciones antiguas que ya no se utilizan.

Step 3 - KO finalmente notifica el observable calculado actualizado.

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

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

  • Guarde el código anterior en dependency_tracking.htm archivo.

  • Abra este archivo HTML en un navegador.

  • Ingrese cualquier nombre de fruta y haga clic en el botón Agregar.

Controlar las dependencias mediante Peek

Se puede acceder al Observable Computado sin crear una dependencia, usando el peekfunción. Controla el Observable actualizando la propiedad calculada.

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

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

  • Guarde el código anterior en dependency_tracking_peek.htm archivo.

  • Abra este archivo HTML en un navegador.

Observaciones

Ignorar dependencias dentro de una dependencia calculada

los ko.ignoreDependenciesLa función ayuda a ignorar aquellas dependencias que no desea rastrear dentro de las dependencias calculadas. A continuación se muestra su sintaxis.

ko.ignoreDependencies( callback, callbackTarget, callbackArgs );

Por qué las dependencias circulares no son significativas

Si KO está evaluando un observable calculado, no reiniciará una evaluación del observable calculado dependiente. Por lo tanto, no tiene sentido incluir ciclos en sus cadenas de dependencia.