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

1.基本綁定和依賴(lài)跟蹤
首先需要定義一個(gè)ViewModel:

復(fù)制代碼代碼如下:

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

然后是一個(gè)用來(lái)顯示這個(gè)ViewModel的View：

復(fù)制代碼代碼如下:

<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)：

復(fù)制代碼代碼如下:

ko.applyBindings(new ViewModel());

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

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

復(fù)制代碼代碼如下:

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è)值依賴(lài)多各值,其中任何一個(gè)值發(fā)生變化,它都會(huì)自動(dòng)發(fā)生變化. 這是通過(guò)computed方法實(shí)現(xiàn)的,代碼如下:

復(fù)制代碼代碼如下:

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

注意獲得一個(gè)observable的值是一個(gè)函數(shù)調(diào)用。這樣當(dāng)first 或者last name發(fā)生變更的時(shí)候fullName也會(huì)自動(dòng)跟著變更。

也可以通過(guò)代碼改變observable的值，頁(yè)面會(huì)自動(dòng)刷新：

復(fù)制代碼代碼如下:

function ViewModel() { 
//……… 
this.capitalizeLastName = function () { 
this.lastName(this.lastName().toUpperCase()); 
} 
} 

在頁(yè)面上添加一個(gè)按鈕:

復(fù)制代碼代碼如下:

點(diǎn)擊按鈕之后便會(huì)出發(fā)viewmodel的capitalizeLastName方法，要改變一個(gè)observable的值的方法就是將新值作為函數(shù)調(diào)用的參數(shù)。點(diǎn)擊之后：

2. 列表綁定

加入我們有如下的訂單ViewModel,使用observableArray來(lái)跟蹤數(shù)組的變化。

復(fù)制代碼代碼如下:

var products=[{name:"Thinkpad X1",price:9000}, 
{name:"Hp ProBook",price:5555}, 
{name:"Mouse",price:45} ]; 

function Order() { 
var self = this; 
self.items = ko.observableArray([ 
//This data should load from server 
new Item(products[0], 1), 
new Item(products[1],2)]); 
self.price = ko.computed(function () { 
var p=0; 
for (var i = 0; i < self.items().length; i++) { 
var item = self.items()[i]; 
p += item.product.price * item.amount(); 
} 
return p; 
}, self); 
}

Order里面的Item實(shí)際上應(yīng)該是從服務(wù)器獲得的，Item定義如下:

復(fù)制代碼代碼如下:

function Item(product, amount) { 
var self = this; 
this.product = product; 
this.amount = ko.observable(amount); 
this.subTotal = ko.computed(function () { 
return self.amount() * self.product.price; 
}, self); 
}

ViewModel準(zhǔn)備好之后，就可以實(shí)現(xiàn)View。這次需要使用foreach綁定，如下:

復(fù)制代碼代碼如下:

<table> 
<thead> 
<tr> 
<td>Name</td> 
<td>Amount</td> 
<td>Price</td> 
</tr> 
</thead> 
<tbody data-bind="foreach: items"> 
<tr> 
<td data-bind="text: product.name"></td> 
<td><select data-bind="options:[1,2,3,4,5,6],value: amount"></select></td> 
<td data-bind="text: subTotal"></td> 
</tr> 
</tbody> 
</table> 
<h3>Order Price:<span data-bind="text: price"></span></h3> 

這樣一個(gè)基本的訂單頁(yè)面就好了，能夠選擇數(shù)量，價(jià)格會(huì)自動(dòng)更新：

下面給訂單加上增刪產(chǎn)品的功能,先給Order加上如下的方法:

復(fù)制代碼代碼如下:

function Order() { 
//…… 
self.remove = function (item) { 
self.items.remove(item); 
} 

self.addMouse = function () { 
self.items.push(new Item(products[2],1)); 
} 
}

給表格加上一列刪除按鈕：

復(fù)制代碼代碼如下:

<td><a href="#" data-bind="click: $root.remove">Remove</a></td>

再在表格底部加上一個(gè)增加產(chǎn)品的按鈕:

復(fù)制代碼代碼如下:

<button data-bind="click: addMouse">Add a Mouse</button>

這時(shí)候，observableArray的功能就體現(xiàn)了，當(dāng)你點(diǎn)擊刪除按鈕或者底部的按鈕的時(shí)候，頁(yè)面節(jié)點(diǎn)會(huì)跟著變化，而不需要手動(dòng)更新DOM節(jié)點(diǎn)，這使得前端的JS大大簡(jiǎn)化。