KnockoutJs快速入門(mén)教程
一、引言
之前這個(gè)系列文章已經(jīng)介紹Bootstrap，詳情請(qǐng)查看本文： 《Bootstrap入門(mén)教程》 ，由于最近項(xiàng)目中，前端是Asp.net MVC + KnockoutJs + Bootstrap來(lái)做的。所以我又重新開(kāi)始寫(xiě)這個(gè)系列。今天就讓我們來(lái)看看Web前端的MVVM框架——KnockoutJs。
二、KnockoutJs是什么？
做.NET開(kāi)發(fā)的人應(yīng)該都知道，WPF中就集成了MVVM框架，所以KnockoutJs也是針對(duì)Web開(kāi)發(fā)的MVVM框架。關(guān)于MVVM好處簡(jiǎn)單點(diǎn)來(lái)說(shuō)就是——使得業(yè)務(wù)邏輯代碼與頁(yè)面展示代碼分割開(kāi)，使得前端項(xiàng)目更好維護(hù)。
之前，我們寫(xiě)Web頁(yè)面的時(shí)候，JS代碼和Html代碼混合在一起，并且代碼中充斥著大量的DOM對(duì)象的操作。這樣代碼結(jié)構(gòu)非常混亂。有了MVVM框架了，你可以將JS代碼和Html代碼分割開(kāi)，并且數(shù)據(jù)操作部分更加簡(jiǎn)單，只需要通過(guò)相應(yīng)的語(yǔ)法（data-bind）綁定到對(duì)應(yīng)的標(biāo)簽屬性顯示即可，從而加快開(kāi)發(fā)速度。
KnockoutJs也就是這樣一個(gè)MVVM框架。其實(shí)與其稱(chēng)其框架，更準(zhǔn)備地應(yīng)該是一個(gè)MVVM類(lèi)庫(kù)。因?yàn)樗鼪](méi)有MVVM框架是一個(gè)比較“重”的概念，其中應(yīng)該包括路由等特性。而KnockoutJS中卻沒(méi)有，相比較，AngularJS應(yīng)該稱(chēng)為一個(gè)MVVM框架更加合適。
KnockoutJS主要實(shí)現(xiàn)的功能有以下4點(diǎn)：
聲明式綁定（Declarative Bindings）：使用簡(jiǎn)單的語(yǔ)法將模型數(shù)據(jù)關(guān)聯(lián)到DOM元素上。即"data-bind"語(yǔ)法
依賴跟蹤（Dependency Tracking）：為轉(zhuǎn)變和聯(lián)合數(shù)據(jù)，在模型數(shù)據(jù)之間建立關(guān)系。如商品總價(jià)是由各個(gè)商品項(xiàng)價(jià)格之和。此時(shí)商品總價(jià)和商品項(xiàng)就可以使用依賴跟蹤功能來(lái)建立關(guān)系。即由各個(gè)商品項(xiàng)的總價(jià)相加而得出。這種關(guān)系由KnockoutJs中computed函數(shù)完成。
UI界面自動(dòng)刷新(Automatic UI Refresh)：當(dāng)你的模型狀態(tài)改變時(shí)，UI界面的將自動(dòng)更新。這點(diǎn)由observable函數(shù)完成。
模板(Templating)：為您的模型數(shù)據(jù)快速編寫(xiě)復(fù)雜的可嵌套UI。和WPF中模板的概念類(lèi)似。
接下來(lái)，我們通過(guò)具體的例子來(lái)讓大家快速掌握KnockoutJs的使用。
三、聲明式綁定
下面讓我們看下如何使用KnockoutJS中的data-bind語(yǔ)法來(lái)將模型數(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)該放在對(duì)應(yīng)的JS文件中，然后在html中通過(guò)Script標(biāo)簽來(lái)引用即可-->
<!--JS代碼也就是業(yè)務(wù)邏輯部分，將業(yè)務(wù)邏輯與Html代碼分割開(kāi)，使得View代碼更加簡(jiǎn)潔，這樣后期也易于維護(hù)-->
<script type="text/javascript">
function ViewModel() {
this.firstName = "Tommy";
this.lastName = "Li";
}
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
2. 上面的例子只是完成了單向綁定的操作。即在上面的例子你會(huì)發(fā)現(xiàn)，當(dāng)改變input標(biāo)簽中的值并離開(kāi)焦點(diǎn)時(shí)，上面的值不會(huì)更新。其實(shí)，KnockoutJS中自動(dòng)更新功能不會(huì)自動(dòng)添加的，需要對(duì)應(yīng)的函數(shù)支持，這個(gè)函數(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>
四、依賴跟蹤
接下來(lái)讓我們看下如何使用KO中的computed函數(shù)來(lái)完成依賴跟蹤。具體例子的實(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);
// 通過(guò)代碼改變observable的值
this.capitalizeLastName = function() {
this.lastName(this.lastName().toUpperCase());
};
}
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
接下來(lái)，讓我們看一下使用聲明式綁定和依賴跟蹤復(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 }];
// 訂單類(lèi)
function Order() {
var self = this;
this.items = ko.observableArray([
new Item(products[0], 1),
new Item(products[1],2)
]);
// 訂單總價(jià)
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)類(lèi)
function Item(product, amount) {
var self = this;
this.product = product;
this.amount = ko.observable(amount);
// 訂單項(xiàng)總價(jià)
this.subTotal = ko.computed(function() {
return self.amount() * self.product.price;
}, self);
}
ko.applyBindings(new Order());
</script>
</body>
</html>
五、模板
看完以上幾個(gè)例子，其實(shí)你應(yīng)該感覺(jué)到KO（KnockoutJS的簡(jiǎn)稱(chēng)）的上手還是非常簡(jiǎn)單的。因?yàn)槠湔Z(yǔ)法都非常容易理解，接下來(lái)看下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的快速入門(mén)的內(nèi)容就結(jié)束了，在下一篇文章中繼續(xù)為大家介紹KO內(nèi)容，下一篇文章的內(nèi)容將介紹如何使用KO來(lái)做一個(gè)實(shí)際的項(xiàng)目，大家不要錯(cuò)過(guò)哦。
相關(guān)文章
zepto.js中tap事件阻止冒泡的實(shí)現(xiàn)方法
這篇文章主要介紹了zepto.js中tap事件阻止冒泡的實(shí)現(xiàn)方法,實(shí)例分析了由冒泡產(chǎn)生的click延遲解決方法,需要的朋友可以參考下2015-02-02
昨天碰到一道關(guān)于如何解決有序數(shù)組的連接問(wèn)題，這是一個(gè)很常見(jiàn)的問(wèn)題。但是這里要考慮到代碼的效率問(wèn)題，因?yàn)橐B接的數(shù)組都是有序的，這是一個(gè)非常重要的前提條件2013-10-10
這篇文章主要給大家介紹了ES5和ES6中類(lèi)的區(qū)別的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
簡(jiǎn)單實(shí)現(xiàn)js選項(xiàng)卡切換效果
這篇文章主要為大家介紹了簡(jiǎn)單實(shí)現(xiàn)js選項(xiàng)卡切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要給大家介紹了關(guān)于微信小程序使用wxParse解析html的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
JavaScript中const關(guān)鍵字的用法及特性
該文章講解了JavaScript中const關(guān)鍵字的用法以及它的一些特性，該關(guān)鍵字用于創(chuàng)建常量，即一旦賦值之后就不能再修改，但是，使用?const創(chuàng)建的對(duì)象和數(shù)組卻可以被修改，本文通過(guò)講解“賦值”和“變異”之間的重要區(qū)別，詳細(xì)解釋了這一現(xiàn)象,需要的朋友可以參考下2023-05-05
JS實(shí)現(xiàn)的Unicode編碼轉(zhuǎn)換操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)的Unicode編碼轉(zhuǎn)換操作,結(jié)合完整實(shí)例形式分析了javascript實(shí)現(xiàn)Unicode編碼轉(zhuǎn)換的具體操作技巧,需要的朋友可以參考下2017-04-04
js之彈出式窗口代碼生成器...2007-06-06
JavaScript監(jiān)聽(tīng)文本框回車(chē)事件并過(guò)濾文本框空格的方法
這篇文章主要介紹了JavaScript監(jiān)聽(tīng)文本框回車(chē)事件并過(guò)濾文本框空格的方法,涉及javascript操作文本框獲取、清空及刪除空格的技巧,需要的朋友可以參考下2015-04-04
JS查找字符串中出現(xiàn)最多的字符及個(gè)數(shù)統(tǒng)計(jì)
最近在項(xiàng)目中遇到這樣的需求：求字符串'nininihaoa'中出現(xiàn)次數(shù)最多字符。怎么實(shí)現(xiàn)呢？下面小編給大家分享具體實(shí)現(xiàn)代碼，需要的朋友參考下吧2017-02-02