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

时间:2022-03-05 18:49:14

标签:

数据监控

KO的三个内置核心功能:

监控(Observable)和依赖性跟踪(dependency tracking)

声明绑定(Declarative bindings)

模板(Templating)

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

MVVM模式和视图模型

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

模型:应用程序所存储的数据。这个数据代表了你的业务领域对象和操作(例如,可以进行资金转账的银行账户),并独立于任何用户界面。当使用KO,通常会用Ajax调用一些服务器端API将数据读取和写入此存储模型。

视图模型:可理解为UI上的数据呈现和操作后的数据暂存的表示。例如,如果你查看一个列表,视图模型将一系列的数据展示并暴露相关操作(添加和删除项目)的方法。

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

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

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

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

var myViewModel = {

????personName: ‘Bob‘,

????personAge: 123

};

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

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

激活KO的绑定关系

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

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

ko.applyBindings(myViewModel);

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

这就行了!现在,您的视图将显示写下面的HTML:

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对象,可将变更通知用户,并能自动检测依赖关系。

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

var myViewModel = {

????personName: ko.observable(‘Bob‘),

????personAge: ko.observable(123)

};

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

读写监控属性

?

读取监控属性的当前值,只需调用视图模型属性的无参数方法。在这个例子中,myViewModel.personName()将返回‘Bob‘myViewModel.personAge()返回123