JavaScript实现的MVVM框架Knockoutjs使用入门

 Knockoutjs是一个JavaScript实现的MVVM框架。主要有如下几个功能：

1. Declarative bindings

2. Observables and dependency tracking

3. Templating

1. 它对于分离前台的业务逻辑和视图简化数据绑定过程有显著的作用。闲言少叙，直接看例子，如何下载也不说了，如果用VS开发的话用Nuget就可以一键搞定。

2. 1. 基本绑定和依赖跟踪

首先需要定义一个ViewModel:

<script type="text/javascript"> 
    function ViewModel() { 
        this.firstName = "Zixin"; 
        this.lastName = "Yin"; 
    } 
</script> 

然后是一个用来显示这个ViewModel的View：

<div> 
    <p data-bind="text: firstName"></p> 
    <p data-bind="text: firstName"></p> 
    <input data-bind="value: firstName"/>  
    <input data-bind="value: lastName"/>  
</div> 

从这个view中可以看到声明式绑定的含义，只需要在标签上使用data-bind属性，就可以将数据的值绑定到相应的地方。有了View和ViewModel还需要代码将这两者关联起来：

ko.applyBindings(new ViewModel()); 

将他们放到一起，注意，applyBinding那代码必须在页面全部加载完之后执行。页面显示为:

下面再看observables，这个功能不是与生俱来的，必须要把View Model设置为observable，方法如下:

function ViewModel() { 
     this.firstName = ko.observable("Zixin"); 
     this.lastName = ko.observable("Yin"); 
 } 

其他都不需要改变，这时候，如果改变输入框中的值，当焦点离开的时候，可以发现p中的值也跟着改变了：

下面再看dependency tracking,也就是如果一个值依赖多各值,其中任何一个值发生变化,它都会自动发生变化. 这是通过computed方法实现的,代码如下:

function ViewModel() { 
     this.firstName = ko.observable("Zixin"); 
     this.lastName = ko.observable("Yin"); 
     this.fullName = ko.computed(function () { return this.lastName() + " " + this.firstName(); },this); 
 }