knockout.js-创建视图模型

监控属性（Observables）

knockout的三个核心特点：

　　1.监控属性与依赖跟踪

　　2.声明式绑定

　　3.模板

本页，你将学习上述三个特性。但是在这之前，先了解一下MVVC模式，及 视图模型（view model）的概念。

MVVM和视图模型（View Models）

　　MVVM : Model-View-View Model 是一种设计模式。它使很复杂的用户界面使用一个很简单的方式实现，它包括如下三部分：

　　模型(model): 表示您的业务对象和逻辑（例如：银行账号汇款），这是和你的UI独立的部分。使用KO的时候，需要调用Ajax调用服务端方法读取或写入数据。

　　视图模型(view model)：UI层面的数据和操作的代码表示。例如，编辑一个列表，view model是一个list对象，并且会有add、remove项的操作。

注意，这个HTML界面是不同的，它只保存临时的前端数据(非持久化），view model只是纯粹的JS对象。

视图(view)：KO里，视图可以理解就是HTML。（其他啰嗦的一堆没有翻译）。

使用KO创建view model,就是声明一个JS对象:

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

创建view:

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

激活Knockout

data-bindHTML并不识别（它严格遵从HTML5语法， 虽然HTML4验证器提示有不可识别的属性但依然可用），由于浏览器不识别它是什么意思，需要在加入如下JS：

ko.applyBindings(myViewModel);

这个需要在文档一加载完成后就执行，可以写在HTML的最后，也可以使用JQuery的$。

这样做完之后，HTML等效于：

The name is <span>Bob</span>

applyBindings的参数说明：

　　第一个参数：view model

　　第二个参数：可选的，一个DOM对象。 如果指定这个参数，将会限定绑定行为只发生在这个DOM的范围及子元素内。

                 　　如：ko.applyBindings(myViewModel, document.getElementById(‘someElementId‘))。

                 　　好处是你可以在同一个页面声明多个view model，用来区分区域。

监控属性（Observables）

上述已经创建了简单的view model，以及把它显示在界面上。 但KO的核心是当view model改变时自动更新界面。这要怎么做呢？答案是使用observables。

例如，重写上面的例子：

view model:

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

view 不用改。这时，当view model的值改变时，界面就会自动更改内容了。

读取、更改监控属性(observables)

　　读取：myViewModel.personName() 返回 ‘Bob‘, and myViewModel.personAge() 返回 123.

　　更改值：myViewModel.personName(‘Mary‘)

　　一次改变多个值：myViewModel.personName(‘Mary‘).personAge(50)

监控属性（observables）的特征就是监控（observed），例如其它代码可以说我需要得到对象变化的通知，所以KO内部有很多内置的绑定语法。所以如果你的代码写成data-bind="text: personName"， text绑定注册到自身，一旦personName的值改变，它就能得到通知。

当然调用myViewModel.personName(‘Mary‘)改变name的值，text绑定将自动更新这个新值到相应的DOM元素上。这就是如何将view model的改变传播到view上的。

 监控属性（Observables）的显式订阅（Explicitly subscribing to observables）

通常情况下，你不用手工订阅，所以新手可以忽略此小节。高级用户，如果你要注册自己的订阅到监控属性（observables），你可以调用它的subscribe 函数。例如：

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

subscribe函数参数：

　　callback 是一个funcation，当值改变时调用

　　target(可选），是callback函数中的this值

　　event(可选) 事件的名称，默认是change

这个subscribe 函数在内部很多地方都用到的。你也可以终止自己的订阅：首先得到你的订阅，然后调用这个对象的dispose函数，例如：

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

如果你要在值改变前得到通知，可以使用beforeChange这个event,例如：

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

注意：knockout不保证beforeChange和change一定成对出现。（后面的没看懂，大概意思是：）如果需要跟踪改变前的值，需要另外实现对值的跟踪。

强迫监控行为一直发生(Forcing observables to always notify subscribers)

一般情况下，当值改变时，KO会捕获到变化，并实施跟踪。但是当值更改前后一样时，这个通知是不会发出的，此时可以使用extender来确保这个通知一直发生，例如：

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

延时 并且/或 抑制 监控属性改变后的通知(Delaying and/or suppressing change notifications)

一般情况下，一但值改变了，监控属性的通知就会马上触发。但是在某些情况下（如改变是重复的，或者处理值的改变的开销比较大），需要延后或者是限制通知产生。此时可以使用rateLimit这个扩展，例如：

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