KnockoutJS - 依赖项跟踪
当值更新时，KnockoutJs 会自动跟踪依赖项。它有一个名为 依赖项跟踪器 (ko.dependencyDetection) 的对象，它充当订阅依赖项的双方之间的中介。
以下是依赖项跟踪的算法。
步骤 1 − 每当您声明计算的可观察变量时，KO 都会立即调用其评估器函数来获取其初始值。
步骤 2 − 为评估器读取的任何可观察变量设置订阅。在应用程序中，不再使用的旧订阅将被处置。
步骤 3 − KO 最终通知更新的计算可观察变量。
示例
<!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>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述代码保存在 dependency_tracking.htm 文件中。
在浏览器中打开此 HTML 文件。
输入任何水果名称并单击添加按钮。
使用 Peek 控制依赖项
使用 peek 函数无需创建依赖项即可访问 Computed Observable。它通过更新计算属性来控制 Observable。
示例
<!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>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述代码保存在 dependency_tracking_peek.htm 文件中。
在浏览器中打开此 HTML 文件。
观察
忽略计算依赖项中的依赖项
ko.ignoreDependencies 函数有助于忽略您不想在计算依赖项中跟踪的依赖项。以下是其语法。
ko.ignoreDependencies(callback,callbackTarget,callbackArgs);
为什么循环依赖没有意义
如果 KO 正在评估 Computed Observable，则它将不会重新启动对依赖 Computed Observable 的评估。因此，在依赖链中包含循环是没有意义的。
