KnockoutJS - Rastreamento de Dependências

KnockoutJs rastreia automaticamente as dependências quando os valores são atualizados. Ele tem um único objeto chamadodependency tracker (ko.dependencyDetection) que atua como um intermediário entre as duas partes para assinar as dependências.

A seguir está o algoritmo para rastreamento de dependência.

Step 1 - Sempre que você declara um observável computado, KO imediatamente invoca sua função de avaliador para obter seu valor inicial.

Step 2- A assinatura é configurada para qualquer observável que o avaliador lê. Em um aplicativo, as assinaturas antigas que não são mais usadas são descartadas.

Step 3 - KO finalmente notifica o observável computado atualizado.

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

Vamos realizar as etapas a seguir para ver como o código acima funciona -

Salve o código acima em dependency_tracking.htm Arquivo.
Abra este arquivo HTML em um navegador.
Insira qualquer nome de fruta e clique no botão Adicionar.

Controlando dependências usando Peek

O Computed Observable pode ser acessado sem criar uma dependência, usando o peekfunção. Ele controla o Observable atualizando a propriedade computada.

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

Vamos realizar as etapas a seguir para ver como o código acima funciona -

Salve o código acima em dependency_tracking_peek.htm Arquivo.
Abra este arquivo HTML em um navegador.

Observações

Ignorando dependências dentro de uma dependência computada

o ko.ignoreDependenciesA função ajuda a ignorar as dependências que você não deseja rastrear nas dependências calculadas. A seguir está sua sintaxe.

ko.ignoreDependencies( callback, callbackTarget, callbackArgs );

Por que dependências circulares não são significativas

Se KO estiver avaliando um Observável Computado, ele não reiniciará uma avaliação do Observável Computado dependente. Portanto, não faz sentido incluir ciclos em suas cadeias de dependência.