KnockoutJS - การติดตามการพึ่งพา

KnockoutJs ติดตามการอ้างอิงโดยอัตโนมัติเมื่อค่าได้รับการอัปเดต มีวัตถุเดียวที่เรียกว่าdependency tracker (ko.dependencyDetection) ซึ่งทำหน้าที่เป็นตัวกลางระหว่างสองฝ่ายสำหรับการสมัครสมาชิกการอ้างอิง

ต่อไปนี้เป็นอัลกอริทึมสำหรับการติดตามการพึ่งพา

Step 1 - เมื่อใดก็ตามที่คุณประกาศค่าที่สังเกตได้จากการคำนวณ KO จะเรียกใช้ฟังก์ชันผู้ประเมินทันทีเพื่อรับค่าเริ่มต้น

Step 2- การสมัครสมาชิกถูกตั้งค่าตามข้อสังเกตใด ๆ ที่ผู้ประเมินอ่าน ในแอปพลิเคชันการสมัครใช้งานเก่าที่ไม่ได้ใช้แล้วจะถูกกำจัดทิ้ง

Step 3 - ในที่สุด KO ก็แจ้งให้ทราบถึงการปรับปรุงที่สังเกตได้จากการคำนวณ

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

ลองทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -

บันทึกรหัสด้านบนใน dependency_tracking.htm ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์
ป้อนชื่อผลไม้แล้วคลิกปุ่มเพิ่ม

การควบคุมการพึ่งพาโดยใช้ Peek

Computed Observable สามารถเข้าถึงได้โดยไม่ต้องสร้างการอ้างอิงโดยใช้ไฟล์ peekฟังก์ชัน มันควบคุม Observable โดยการอัพเดตคุณสมบัติที่คำนวณ

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

ลองทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -

บันทึกรหัสด้านบนใน dependency_tracking_peek.htm ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์

ข้อสังเกต

ละเว้นการพึ่งพาภายในการพึ่งพาการคำนวณ

ko.ignoreDependenciesฟังก์ชันช่วยละเว้นการอ้างอิงที่คุณไม่ต้องการติดตามภายในการอ้างอิงที่คำนวณได้ ต่อไปนี้เป็นไวยากรณ์

ko.ignoreDependencies( callback, callbackTarget, callbackArgs );

เหตุใดการพึ่งพาแบบวงกลมจึงไม่มีความหมาย

หาก KO กำลังประเมิน Computed Observable จะไม่เริ่มการประเมินค่า Computed Observable ที่ขึ้นอยู่กับ ดังนั้นจึงไม่สมเหตุสมผลที่จะรวมวงจรไว้ในห่วงโซ่การพึ่งพาของคุณ