一、引言
之前這個系列文章已經(jīng)介紹Bootstrap，詳情請查看本文： 《Bootstrap入門教程》 ，由于最近項(xiàng)目中，前端是Asp.net MVC + KnockoutJs + Bootstrap來做的。所以我又重新開始寫這個系列。今天就讓我們來看看Web前端的MVVM框架——KnockoutJs。
二、KnockoutJs是什么？
做.NET開發(fā)的人應(yīng)該都知道，WPF中就集成了MVVM框架，所以KnockoutJs也是針對Web開發(fā)的MVVM框架。關(guān)于MVVM好處簡單點(diǎn)來說就是——使得業(yè)務(wù)邏輯代碼與頁面展示代碼分割開，使得前端項(xiàng)目更好維護(hù)。
之前，我們寫Web頁面的時候，JS代碼和Html代碼混合在一起，并且代碼中充斥著大量的DOM對象的操作。這樣代碼結(jié)構(gòu)非常混亂。有了MVVM框架了，你可以將JS代碼和Html代碼分割開，并且數(shù)據(jù)操作部分更加簡單，只需要通過相應(yīng)的語法（data-bind）綁定到對應(yīng)的標(biāo)簽屬性顯示即可，從而加快開發(fā)速度。
KnockoutJs也就是這樣一個MVVM框架。其實(shí)與其稱其框架，更準(zhǔn)備地應(yīng)該是一個MVVM類庫。因?yàn)樗鼪]有MVVM框架是一個比較“重”的概念，其中應(yīng)該包括路由等特性。而KnockoutJS中卻沒有，相比較，AngularJS應(yīng)該稱為一個MVVM框架更加合適。
KnockoutJS主要實(shí)現(xiàn)的功能有以下4點(diǎn)：
聲明式綁定（Declarative Bindings）：使用簡單的語法將模型數(shù)據(jù)關(guān)聯(lián)到DOM元素上。即"data-bind"語法
依賴跟蹤（Dependency Tracking）：為轉(zhuǎn)變和聯(lián)合數(shù)據(jù)，在模型數(shù)據(jù)之間建立關(guān)系。如商品總價是由各個商品項(xiàng)價格之和。此時商品總價和商品項(xiàng)就可以使用依賴跟蹤功能來建立關(guān)系。即由各個商品項(xiàng)的總價相加而得出。這種關(guān)系由KnockoutJs中computed函數(shù)完成。
UI界面自動刷新(Automatic UI Refresh)：當(dāng)你的模型狀態(tài)改變時，UI界面的將自動更新。這點(diǎn)由observable函數(shù)完成。
模板(Templating)：為您的模型數(shù)據(jù)快速編寫復(fù)雜的可嵌套UI。和WPF中模板的概念類似。
接下來，我們通過具體的例子來讓大家快速掌握KnockoutJs的使用。
三、聲明式綁定
下面讓我們看下如何使用KnockoutJS中的data-bind語法來將模型數(shù)據(jù)綁定到DOM元素中。
1.單向綁定
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Demo1-單向綁定</title> <script type="text/javascript" src="/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script></head> <body> <!--單向綁定--> <div> <p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> </div> <!--這段腳本實(shí)際項(xiàng)目中應(yīng)該放在對應(yīng)的JS文件中，然后在html中通過Script標(biāo)簽來引用即可--> <!--JS代碼也就是業(yè)務(wù)邏輯部分，將業(yè)務(wù)邏輯與Html代碼分割開，使得View代碼更加簡潔，這樣后期也易于維護(hù)--> <script type="text/javascript"> function ViewModel() { this.firstName = "Tommy"; this.lastName = "Li"; } ko.applyBindings(new ViewModel()); </script> </body></html>
2. 上面的例子只是完成了單向綁定的操作。即在上面的例子你會發(fā)現(xiàn)，當(dāng)改變input標(biāo)簽中的值并離開焦點(diǎn)時，上面的值不會更新。其實(shí)，KnockoutJS中自動更新功能不會自動添加的，需要對應(yīng)的函數(shù)支持，這個函數(shù)就是observable函數(shù)，下面具體看看雙向綁定的例子：
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Demo2-雙向綁定</title> <script type="text/javascript" src="/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script></head><body> <!--雙向綁定--> <div> <p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> <p>First name: <input data-bind="value: firstName"/></p> <p>Last name: <input data-bind="value: lastName" /></p> </div> <script type="text/javascript"> function ViewModel() { this.firstName = ko.observable("Tommy"); this.lastName = ko.observable("Li"); } ko.applyBindings(new ViewModel()); </script></body></html> 四、依賴跟蹤
接下來讓我們看下如何使用KO中的computed函數(shù)來完成依賴跟蹤。具體例子的實(shí)現(xiàn)代碼如下所示：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Demo3-依賴跟蹤</title> <script type="text/javascript" src="/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script></head><body> <!--雙向綁定--> <div> <p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName"/></p> <p>Full name: <strong data-bind="text: fullName"></strong></p> <button data-bind="click: capitalizeLastName">LastName To Upper</button> </div> <script type="text/javascript"> function ViewModel() { this.firstName = ko.observable("Tommy"); this.lastName = ko.observable("Li"); // 依賴跟蹤 this.fullName = ko.computed(function () { return this.firstName() + " " + this.lastName(); },this); // 通過代碼改變observable的值 this.capitalizeLastName = function() { this.lastName(this.lastName().toUpperCase()); }; } ko.applyBindings(new ViewModel()); </script></body></html> 接下來，讓我們看一下使用聲明式綁定和依賴跟蹤復(fù)雜點(diǎn)的例子。具體示例代碼如下：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Demo4-列表綁定</title> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script></head><body> <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> <td><a href="#" data-bind="click: $root.remove">Remove</a></td> </tr> </tbody> </table> <h3>Order Price: <span data-bind="text: price"></span></h3> <button data-bind="click: addComputer">Add a Computer</button> <script type="text/javascript"> var products = [{ name: "Learnighard 學(xué)習(xí)筆記", price: 49 }, { name: "小米Note", price: 999 }, { name: "宏碁筆記本", price: 4999 }]; // 訂單類 function Order() { var self = this; this.items = ko.observableArray([ new Item(products[0], 1), new Item(products[1],2) ]); // 訂單總價 this.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); this.remove = function(item) { self.items.remove(item); }; this.addComputer = function () { self.items.push(new Item(products[2], 1)); }; } // 訂單項(xiàng)類 function Item(product, amount) { var self = this; this.product = product; this.amount = ko.observable(amount); // 訂單項(xiàng)總價 this.subTotal = ko.computed(function() { return self.amount() * self.product.price; }, self); } ko.applyBindings(new Order()); </script></body></html> 五、模板
看完以上幾個例子，其實(shí)你應(yīng)該感覺到KO（KnockoutJS的簡稱）的上手還是非常簡單的。因?yàn)槠湔Z法都非常容易理解，接下來看下KO中模板的使用。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Demo5-模板綁定</title> <script type="text/javascript" src="/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script></head> <body> <!--模板綁定，div的內(nèi)容為personTemplate模板內(nèi)的標(biāo)簽--> <!--即最終生成如下標(biāo)簽--> <!--<div> <p>Name: <strong data-bind="text: name"></strong></p> <p>Age: <strong data-bind="text: age"></strong></p> </div>--> <div data-bind="template:'personTemplate'"></div> <script id="personTemplate" type="text/html"> <p>Name: <strong data-bind="text: name"></strong></p> <p>Age: <strong data-bind="text: age"></strong></p> </script> <script type="text/javascript"> var ViewModel = { name: ko.observable('Tommy'), age: ko.observable(28), makeOlder: function() { this.age(this.age() + 1); } }; ko.applyBindings(ViewModel); </script> </body></html> <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Demo6-模板綁定</title> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script></head> <body> <h2>Participants</h2> Here are the participants: <div data-bind="template: { name: 'persontemplate', foreach: people }"></div> <script type="text/html" id="persontemplate"> <h3 data-bind="text: name"></h3> <p>Age: <span data-bind="text: age"></span></p> </script> <script type="text/javascript"> function MyViewModel() { this.people = [ { name: 'Tommy', age: 27 }, { name: 'Frank', age: 33 } ]; } ko.applyBindings(new MyViewModel()); </script> </body></html> 關(guān)于模板更多的使用參考官方文檔：http://knockoutjs.com/documentation/template-binding.html。本文只列出了2中模板的使用。
六、總結(jié)
到此，KnockoutJs的快速入門的內(nèi)容就結(jié)束了，在下一篇文章中繼續(xù)為大家介紹KO內(nèi)容，下一篇文章的內(nèi)容將介紹如何使用KO來做一個實(shí)際的項(xiàng)目，大家不要錯過哦。
