Knockoutjs是一個(gè)JavaScript實(shí)現(xiàn)的MVVM框架。主要有如下幾個(gè)功能：

1. Declarative bindings

2. Observables and dependency tracking

3. Templating

1. 它對(duì)于分離前臺(tái)的業(yè)務(wù)邏輯和視圖簡(jiǎn)化數(shù)據(jù)綁定過(guò)程有顯著的作用。閑言少敘，直接看例子，如何下載也不說(shuō)了，如果用VS開(kāi)發(fā)的話用Nuget就可以一鍵搞定。

2. 1. 基本綁定和依賴跟蹤

首先需要定義一個(gè)ViewModel:

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

然后是一個(gè)用來(lái)顯示這個(gè)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> 

從這個(gè)view中可以看到聲明式綁定的含義，只需要在標(biāo)簽上使用data-bind屬性，就可以將數(shù)據(jù)的值綁定到相應(yīng)的地方。有了View和ViewModel還需要代碼將這兩者關(guān)聯(lián)起來(lái)：

ko.applyBindings(new ViewModel()); 

將他們放到一起，注意，applyBinding那代碼必須在頁(yè)面全部加載完之后執(zhí)行。頁(yè)面顯示為:

下面再看observables，這個(gè)功能不是與生俱來(lái)的，必須要把View Model設(shè)置為observable，方法如下:

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

其他都不需要改變，這時(shí)候，如果改變輸入框中的值，當(dāng)焦點(diǎn)離開(kāi)的時(shí)候，可以發(fā)現(xiàn)p中的值也跟著改變了：

下面再看dependency tracking,也就是如果一個(gè)值依賴多各值,其中任何一個(gè)值發(fā)生變化,它都會(huì)自動(dòng)發(fā)生變化. 這是通過(guò)computed方法實(shí)現(xiàn)的,代碼如下:

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