KnockoutJS - Pelacakan Ketergantungan

KnockoutJs secara otomatis melacak dependensi saat nilainya diperbarui. Ini memiliki satu objek yang disebutdependency tracker (ko.dependencyDetection) yang bertindak sebagai perantara antara dua pihak untuk berlangganan dependensi.

Berikut algoritma untuk pelacakan ketergantungan.

Step 1 - Kapanpun Anda mendeklarasikan sebuah observasi yang dapat dihitung, KO segera memanggil fungsi evaluatornya untuk mendapatkan nilai awalnya.

Step 2- Langganan diatur ke setiap observasi yang dibaca evaluator. Dalam sebuah aplikasi, langganan lama yang tidak lagi digunakan akan dibuang.

Step 3 - KO akhirnya memberi tahu hasil observasi yang dihitung.

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

Mari kita lakukan langkah-langkah berikut untuk melihat cara kerja kode di atas -

Simpan kode di atas dependency_tracking.htm mengajukan.
Buka file HTML ini di browser.
Masukkan nama buah apa saja dan klik tombol Tambah.

Mengontrol Dependensi Menggunakan Peek

The Computed Observable dapat diakses tanpa membuat ketergantungan, dengan menggunakan peekfungsi. Ini mengontrol Observable dengan memperbarui properti yang dihitung.

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

Mari kita lakukan langkah-langkah berikut untuk melihat cara kerja kode di atas -

Simpan kode di atas dependency_tracking_peek.htm mengajukan.
Buka file HTML ini di browser.

Pengamatan

Mengabaikan Dependensi Dalam Dependensi yang Dihitung

Itu ko.ignoreDependenciesfunction membantu mengabaikan dependensi yang tidak ingin Anda lacak dalam dependensi yang dihitung. Berikut ini adalah sintaksnya.

ko.ignoreDependencies( callback, callbackTarget, callbackArgs );

Mengapa Ketergantungan Melingkar Tidak Berarti

Jika KO mengevaluasi Pengamatan Terhitung, maka KO tidak akan memulai kembali evaluasi Pengamatan Terhitung yang bergantung. Karenanya, tidak masuk akal untuk menyertakan siklus dalam rantai ketergantungan Anda.