Knockoutjs快速入門(經典)_基礎知識

Knockoutjs是一個JavaScript實作的MVVM框架。主要有以下幾個功能：

1. Declarative bindings

2. Observables and dependency tracking

3. Templating

它對於分離前台的業務邏輯和視圖簡化資料綁定過程有顯著的作用。閒言少敘，直接看例子，如何下載也不說了，如果用VS開發的話用Nuget就可以一鍵搞定。

1.基本綁定與依賴追蹤
首先需要定義一個ViewModel:

複製程式碼

複製程式碼

複製程式碼



複製程式碼

複製程式碼複製程式碼

複製程式碼



複製程式碼

複製碼

程式碼如下:

}

然後是一個用來顯示這個ViewModel的View：

複製程式碼

程式碼如下:

從這個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("Zixin");

this.lastName = ko.servobable(" Yin");

}

其他都不需要改變，這時候，如果改變輸入框中的值，當焦點離開的時候，可以發現p中的值也跟著改變了： 下面再看dependency tracking,也就是如果一個值依賴多各值,其中任何一個值發生變化,它都會自動發生變化. 這是透過computed方法實現的,代碼如下:

複製程式碼


程式碼如下:

function ViewModel() {
this.firstName = ko.obable("Zixix" );

this.lastName = ko.observable("Yin"); this.fullName = ko.computed(function () { return this.lastName() " " this.firstName(); },this ); } 注意得到一個observable的值是一個函式呼叫。這樣當first 或last name發生變更的時候fullName也會自動跟著變更。

也可以透過程式碼改變observable的值，頁面會自動刷新：複製程式碼 程式碼如下:function ViewModel() { //……… this.capitalizeLastName = function () { this.lastName(this.lastName().toUpperCase()); this.lastName(this.lastName().toUpperCase()); } } 在頁面上加上一個按鈕:複製程式碼複製程式碼複製程式碼 程式碼如下:> 程式碼如下:

Caps

點選按鈕之後便會出發viewmodel的capitalizeLastName方法，要改變一個observable的值的方法就是將新值作為函數呼叫的參數。點擊之後：

 

2. 列表綁定

加入我們有如下的訂單ViewModel,使用observableArray來追蹤陣列的變化。

複製程式碼 程式碼如下:

var products=[{name:"Think 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 var item = self.items()[i];
p = item.product.price * item.amount();
}
return p;
}, self);
}

Order裡面的Item其實應該是從伺服器取得的，Item定義如下:

複製程式碼 程式碼如下:

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準備好之後，就可以實作View。這次需要使用foreach綁定，如下:

複製程式碼 程式碼如下:

Name	Amount	Price
td>

Order Price:

這樣一個基本的訂單頁面就好了，能夠選擇數量，價格會自動更新：

下面為訂單加上增刪產品的功能,先給Order加上如下的方法:

複製程式碼 代碼如下:

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

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

}
}

}}

加上一列刪除按鈕
：

複製程式碼複製程式碼

程式碼>
Remove

再在表格底部加上一個增加產品的按鈕:複製程式碼 程式碼如下:Add a Mouse
這時候，observableArray的功能就體現了，當你點擊刪除按鈕或底部的按鈕的時候，頁面節點會跟著變化，而不需要手動更新DOM節點，這使得前端的JS大大簡化。