KnockoutJS 3.X API 第二章 数据监控视图模型与监控

Posted 2020-08-11

数据监控

KO的三个内置核心功能：

1. 监控(Observable)和依赖性跟踪(dependency tracking)
2. 声明绑定(Declarative bindings)
3. 模板(Templating)

在这个页面上，您将了解三种核心功能的第一种。但在此之前，让我们来看看MVVM模式的概念和视图模型的概念。

MVVM模式和视图模型

模型-视图-视图模型（MVVM）是用于构建用户界面的设计模式。它描述了如何将复杂的UI分割成三个部分：

• 模型：应用程序所存储的数据。这个数据代表了你的业务领域对象和操作（例如，可以进行资金转账的银行账户），并独立于任何用户界面。当使用KO，通常会用Ajax调用一些服务器端API将数据读取和写入此存储模型。
• 视图模型：可理解为UI上的数据呈现和操作后的数据暂存的表示。例如，如果你查看一个列表，视图模型将一系列的数据展示并暴露相关操作(添加和删除项目)的方法。

  需要注意的是，视图模型并不参与UI的呈现方式：它不具有按钮或显示样式的任何概念。不是持久化数据模型，它是用户正在查看或未保存的数据。当使用KO，你的视图模型是纯javascript对象。

• 视图：代表MVVM模式状态的可见部分，用户的互动界面。它显示从视图模型的信息，发送命令到视图模型（例如，当用户点击按钮）。

  当使用KO，视图是简单地声明绑定到其视图模型的html文档。另外，也可以使用视图模型的数据生成HTML模板。

要创建具有KO视图模型，只是声明任何JavaScript对象。例如：

1. var myViewModel = {
2. ????personName: ‘Bob‘,
3. ????personAge: 123
4. };

然后，您可以创建一个非常简单的视图使用声明绑定这一观点模型。例如，下面的标记显示personName值：

1. The name is <span data-bind="text: personName"></span>

激活KO的绑定关系

该data-bind属性不属于HTML的基础元素属性，但是还是可以正常运行的。但由于浏览器不知道这意味着什么，你需要激活KO的绑定关系，使之生效。

要激活KO的绑定关系，在<script>模块中添加一行代码：

1. ko.applyBindings(myViewModel);

您可以把脚本写在HTML文档的底部，或者你可以把它写在HTML文档顶部并在文档的DOM就绪后处理，如使用jQuery的$功能。

这就行了！现在，您的视图将显示写下面的HTML：

1. The name is <span>Bob</span>

ko.applyBindings的参数

第一个参数是要高数KO，你要绑定的视图模型是那个。

你可以传递第二个参数是定义要搜索该文档的那一部分data-bind属性。例如，ko.applyBindings(myViewModel, document.getElementById(‘someElementId‘))。这限制激活绑定视图模型的范围在HTML元素的ID元素为someElementId及其子元素，如果你想有多个视图模型的激活绑定或者每个页面的不同区域进行模型绑定的话这种方式是很有用的。

监控(Observable)

OK，你已经看到了如何创建一个基本视图模型以及如何显示绑定的属性。但是KO的主要好处是，它会根据视图模型变化自动更新你的UI。KO如何知道什么时候您的视图模型的一部分改变的呢？答案就是你需要为你的视图模型设置observable(监控)，这是特殊的JavaScript对象，可将变更通知用户，并能自动检测依赖关系。

例如，改写前面的视图模型对象，如下所示：

1. var myViewModel = {
2. ????personName: ko.observable(‘Bob‘),
3. ????personAge: ko.observable(123)
4. };

当视图模型属性值发生变化时，会自动更新UI中的data-bind的绑定属性。同理UI中绑定属性发生变化时也会自动同步到视图模型中。

读写监控属性

?

• 要读取监控属性的当前值，只需调用视图模型属性的无参数方法。在这个例子中，myViewModel.personName()将返回‘Bob‘，myViewModel.personAge()返回123。
• 为了赋值一个新值到监控属性，只需要调用视图模型属性的有参数方法，将值作为参数传递。例如，调用myViewModel.personName(‘Mary‘)将更改名称值‘Mary‘。
• 将值写入多个监控属性的模型对象，你可以使用链式语法。例如，myViewModel.personName(‘Mary‘).personAge(50)将更改名称值和年龄值为‘Mary‘?50

?

KO将可以监控监控属性，当你写data-bind="text: personName"时，text结合自身注册时得到通知personName的变化。

当您更改名称值‘Mary‘调用myViewModel.personName(‘Mary‘)时，text绑定会自动更新相关的DOM元素的文本内容。

声明监控

你通常需要手动设置订阅，所以初学者应该跳过这一节。

对于高级用户，如果你想注册自己的订阅通知的变化监控，你可以调用subscribe函数。例如：

1. myViewModel.personName.subscribe(function(newValue) {
2. ????alert("The person‘s new name is " + newValue);
3. });

该subscribe函数是KO内部函数。大多数时候，你不需要用这个，因为内置的绑定和模板系统管理监控已经够用了。

该subscribe函数接受三个参数：callback是每当发生通知被调用的函数，target（可选）定义的值this的回调函数，event（可选，默认为"change"）是事件接收通知的名称。

您也可以终止订阅，可以调用dispose函数，例如：

1. var subscription = myViewModel.personName.subscribe(function(newValue) { /* do stuff */ });
2. // ...then later...
3. subscription.dispose(); // I no longer want notifications

如果你想在监控发生之前执行相关业务，可以使用beforeChange事件。例如：

1. myViewModel.personName.subscribe(function(oldValue) {
2. ????alert("The person‘s previous name is " + oldValue);
3. }, null, "beforeChange");

强行监控属性实时通知用户

当赋值一个包含原始值（一个数字，字符串，布尔值，或者为null）监控属性，使用内置的notified?，以确保一个观测监控属性的用户总是得到通知，即使该值是相同的。

1. myViewModel.personName.extend({ notify: ‘always‘ });

延缓和/或抑制更改通知

通常情况下，监控属性值改变会立即通知其用户。但是，如果一个监控属性频繁更新会带来高昂的数据传输代价，你可以通过限制或延迟变更通知获得更好的性能。这是通过使用rateLimit增量实现：

1. // Ensure it notifies about changes no more than once per 50-millisecond period
2. myViewModel.personName.extend({ rateLimit: 50 });

?

1. 感谢您的阅读。喜欢的、有用的就请大哥大嫂们高抬贵手"推荐一下"吧！你的精神支持是博主强大的写作动力。欢迎转载！
2. ?
3. 我的博客：http://www.cnblogs.com/smallprogram/

?