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 });