Knockout开发中文API系列2–建立数据模型和监控属性

Observables，这个词的翻译来自汤姆大叔，对于部分翻译不是很准确的，欢迎你们留言，以获得更好的翻译。

Knockout是创建在如下3个核心功能之上的:

• 一、    属性监控与依赖跟踪
• 二、    声明式绑定
• 三、    模版机制

在本节中，咱们将学习3个核内心面的第一个。但在这以前，先让咱们学习一下MVVM设计模式和View Model的概念。

MVVM和View Models

Model-View-View Model (MVVM)是一种建立用户界面的设计模式。经过它只要将UI界面分红如下3个部分，就可使复杂的界面变得简单：

一、Model，用于存储你应用程序数据，这些数据表示你业务领域的对象和数据操做（例如：银行能够进行资金转帐），而且独立于任何界面。当使用KO的时候，一般是使用Ajax向服务器请求数据来读写这个数据模型。

二、View Model，纯粹用于描述数据内容和页面操做的数据模型。例如，若是你想实现一个列表编辑器，你的ViewModel（数据模型）就是项目清单对象和你所暴露出来的添加和删除列表项的方法。

注意：这不是UI自己，它不具备任何按钮和显示样式的概念。这不是持久化的数据模型—它仅是用户当前使用的未保存的数据。当使用KO时，你的View Model（数据模型）是纯粹的不包含HTML知识的JavaScript对象，保持View Model（数据模型）抽象在使用时能够保持简单，所以你能够更简单的操做管理更复杂的行为。

三、View，表明View Model状态的一个可见、互动的UI界面。它主要用于显示View Model的数据信息、发送用户命令（例如，当用户点击按钮）以及在View Model发生变化时保持自动更新。

使用KO时，你的View层主要就是简单的将HTML文档声明式的绑定到View Model，将它们关联起来。另外，你也能够利用模版从View Model获取数据动态生成HTML。

使用KO建立一个View Model，仅仅只须要声明一个JavaScript对象，例如：

var myViewModel = {
    personName: 'Bob',
    personAge: 123
};

你能够建立一个简单的视图声明式绑定到这个View Model上，例如，下面的代码显示personName的值：

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

激活Knockout

data-bind属性并非HTML固有对象，但使用它是彻底正确的（这是彻底遵照HTML5，尽管有验证器指出这是一个没法验证的属性，但在HTML4当中使用是不会形成任何问题的）。但浏览器并不知道它是什么意思，因此你须要激活Knockout来使其生效。

激活Knockout，只须要将下面的代码加到<script>标签中就能够了：

ko.applyBindings(myViewModel);

你能够将这个代码放到文档底部，或者放在顶部包含在DOM处理完成诸如JQuery的$函数方法中。

以上操做完成后，你的View（页面）显示的内容等同于编写如下HTML代码：

The name is <span>Bob</span>

下面介绍下ko.applyBindings操做时使用的是什么样的参数：

第一个参数是你想激活KO时用于声明式绑定的View Model对象；

第二个参数（可选），你可使用第二个参数来设置要使用data-bind属性的HTML元素或容器。例如：

ko.applyBindings(myViewModel, document.getElementById('someElementId'))

它限制了只有ID为someElementId的元素才能激活使用KO功能，当你在一个页面中声明了多个View Model来绑定不一样的界面区域时，这样限制是颇有好处的。

 

在上节中，咱们知道了若是建立一个ViewModel，而且如何激活Knockout，本节中，将学习监控属性相关内容。

Observables

上面，你已经看到如何建立一个基本的数据模型以及如何利用绑定来显示它的属性。可是KO最重要的一个属性就是当View Model发生变化时可以自动的更新UI界面。KO是如何可以知道你的View Model已经发生改变了呢？答案是：你须要将你的model属性声明成observable的, 由于它是很是特殊的JavaScript 对象，可以通知用户它的改变以及自动检测依赖关系。

例如：重写上述例子中的View Model为如下代码：

var myViewModel = {
    personName: ko.observable('Bob'),
    personAge: ko.observable(123)
};

你根本不须要对View进行更改，全部的data-bind语法依然正常工做。所不一样的是，如今它可以自动检测变化，并通知它自动更新界面（View）。

Reading and writing observables

并非全部的浏览器都支持JavaScript的getters and setters (好比IE)，因此，为了兼容，ko.observable监控的对象都是方法。

一、读取当前监控的属性值，只须要直接调用observable（不须要参数），在这个例子当中，调用myViewModel.personName()将会返回'Bob'，调用myViewModel.personAge() 将会返回'123'

二、写一个新值到监控属性上，调用observable方法，将要写的值做为一个参数传入便可。例如，调用myViewModel.personName('Mary') 将会把名称改变成 'Mary'。

三、一次性改变Model对象监控的多个属性值，你可使用链式方法。例如：myViewModel.personName('Mary').personAge(50) 将会把名称改变成'Mary'将年龄设置为 50.

监控属性最重要的一点就是能够随时监控，也就是说，其余代码能够告诉它哪些是须要通知发生变化的。这就是为何KO会有如此多的内置绑定语法。因此，当你在页面中编写data-bind="text: personName"，text 会绑定注册到自身，当personName发生变化时，它可以当即获得通知。

当你经过调用 myViewModel.personName('Mary') 将名称的值改变成为'Mary'时，text绑定会自动更新新值到其对应的DOM对象元素上,这就是为何改变数据模型可以自动刷新View页面。

监控属性的显示订阅

一般状况下,你不须要手工订阅,因此初学者能够跳过这一节。

对于高级用户，若是你想要注册本身的订阅来通知监控属性的变化，你可使用subscribe 方法。例如：

myViewModel.personName.subscribe(function(newValue) {
    alert("The person's new name is " + newValue);
});

subscribe 方法在KO内部不少地方都有用到。你也能够终止本身的订阅：首先获取到这个订阅，而后调用dispose方法便可。例如：

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

大多数时间，你不须要这么作，由于内置的绑定和模版系统功能在管理订阅上已经作了不少工做。