Question

我正在学习Knockout.js，我有一个基本的问题，这可能听起来很傻，但它确实让我困扰了很长一段时间。

根据官方网站，Knockout.js的一个主要特点是：

优雅的依赖关系跟踪 - 在数据模型发生变化时自动更新用户界面的正确部分。

我明白这是如何运作的。（如果我在任何方面都错了，请在下面纠正我。）

基本上，如果我有以下观点：

<h1 data-bind="text: name"></h1>
<p data-bind="text: status"></p>

并遵循ViewModel：

function FlightVM () {
    this.name = ko.observable("Boieng 120");
    this.status = ko.observable("In Air");
}

ko.applyBindings(new FlightVM());

如果我在某处更改数据，它会自动更新相应的html。我很清楚这一点。

我的问题是，这里的不同之处不仅仅是在View中设置我的数据，如下所示：

var name = "Boieng 120";
$("h1").html(name);

此处，如果我更改名称并刷新页面，它将动态更新html。 Knockout给我们带来了什么好处？

Answer 1

没有。这里接受的答案有点不完整。

您对“依赖性跟踪”实际意味着什么的理解是不正确的。你所描述的实际上只是knockoutjs的数据绑定部分。此功能非常常见，许多其他框架以多种方式复制。

依赖性跟踪是淘汰赛变得更加聪明的地方。

假设你有两个可观察者：

var firstName = ko.observable("akshay");
var lastName = ko.observable("Khot");

现在你创建一个计算的observable：

var fullName = ko.computed(function(){return firstName()+" "+lastName();});

现在让我们制作一个模型：

var model = {
    firstName:firstName,
    lastName:lastName,
    fullName:fullName
}

并绑定它：

ko.applyBindings(model);

到以下HTML：

<span data-bind="text:fullName"></span>

现在，因为依赖关系跟踪计算出fullName取决于firstName和lastName，所以当您更新其中任何一个值时：

model.lastName("is cool");

然后来自model.fullName的依赖项的通知将导致model.fullName的值发生更改，并且此值将在DOM中更新（现在它将显示为akshay is cool），即使DOM未绑定到lastName，也只能依赖lastName。

当你想到它时，它非常整洁，并且这个功能让我回到KO作为我的goto框架。

如果这让你对如何运作感到好奇......

和