久久大香香蕉国产拍国,91久久愉拍愉拍国产一区

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

KnockoutJs快速入門教程

來源：易賢網(wǎng) 閱讀：1270 次日期：2016-06-27 16:31:40

溫馨提示：易賢網(wǎng)小編為您整理了“KnockoutJs快速入門教程”,方便廣大網(wǎng)友查閱！

這篇文章主要為大家分享了KnockoutJs快速入門教程，了解KnockoutJs到底是什么？如何使用KnockoutJS中的data-bind語法來將模型數(shù)據(jù)綁定到DOM元素中，感興趣的小伙伴們可以參考一下

一、引言

之前這個系列文章已經(jīng)介紹Bootstrap，詳情請查看本文：《Bootstrap入門教程》，由于最近項目中，前端是Asp.net MVC + KnockoutJs + Bootstrap來做的。所以我又重新開始寫這個系列。今天就讓我們來看看Web前端的MVVM框架——KnockoutJs。

二、KnockoutJs是什么？

做.NET開發(fā)的人應(yīng)該都知道，WPF中就集成了MVVM框架，所以KnockoutJs也是針對Web開發(fā)的MVVM框架。關(guān)于MVVM好處簡單點來說就是——使得業(yè)務(wù)邏輯代碼與頁面展示代碼分割開，使得前端項目更好維護。

之前，我們寫Web頁面的時候，JS代碼和Html代碼混合在一起，并且代碼中充斥著大量的DOM對象的操作。這樣代碼結(jié)構(gòu)非常混亂。有了MVVM框架了，你可以將JS代碼和Html代碼分割開，并且數(shù)據(jù)操作部分更加簡單，只需要通過相應(yīng)的語法（data-bind）綁定到對應(yīng)的標(biāo)簽屬性顯示即可，從而加快開發(fā)速度。

KnockoutJs也就是這樣一個MVVM框架。其實與其稱其框架，更準(zhǔn)備地應(yīng)該是一個MVVM類庫。因為它沒有MVVM框架是一個比較“重”的概念，其中應(yīng)該包括路由等特性。而KnockoutJS中卻沒有，相比較，AngularJS應(yīng)該稱為一個MVVM框架更加合適。

KnockoutJS主要實現(xiàn)的功能有以下4點：

聲明式綁定（Declarative Bindings）：使用簡單的語法將模型數(shù)據(jù)關(guān)聯(lián)到DOM元素上。即"data-bind"語法

依賴跟蹤（Dependency Tracking）：為轉(zhuǎn)變和聯(lián)合數(shù)據(jù)，在模型數(shù)據(jù)之間建立關(guān)系。如商品總價是由各個商品項價格之和。此時商品總價和商品項就可以使用依賴跟蹤功能來建立關(guān)系。即由各個商品項的總價相加而得出。這種關(guān)系由KnockoutJs中computed函數(shù)完成。

UI界面自動刷新(Automatic UI Refresh)：當(dāng)你的模型狀態(tài)改變時，UI界面的將自動更新。這點由observable函數(shù)完成。

模板(Templating)：為您的模型數(shù)據(jù)快速編寫復(fù)雜的可嵌套UI。和WPF中模板的概念類似。

接下來，我們通過具體的例子來讓大家快速掌握KnockoutJs的使用。

三、聲明式綁定

下面讓我們看下如何使用KnockoutJS中的data-bind語法來將模型數(shù)據(jù)綁定到DOM元素中。

1.單向綁定

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>

<p>First name: <strong data-bind="text: firstName"></strong></p>

<p>First name: <input data-bind="value: firstName" /></p>

</div>

function ViewModel() {

this.firstName = "Tommy";

this.lastName = "Li";

}

ko.applyBindings(new ViewModel());

</script>

</body>

</html>

2. 上面的例子只是完成了單向綁定的操作。即在上面的例子你會發(fā)現(xiàn)，當(dāng)改變input標(biāo)簽中的值并離開焦點時，上面的值不會更新。其實，KnockoutJS中自動更新功能不會自動添加的，需要對應(yīng)的函數(shù)支持，這個函數(shù)就是observable函數(shù)，下面具體看看雙向綁定的例子：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>

<p>First name: <strong data-bind="text: firstName"></strong></p>

<p>First name: <input data-bind="value: firstName"/></p>

</div>

function ViewModel() {

this.firstName = ko.observable("Tommy");

this.lastName = ko.observable("Li");

}

ko.applyBindings(new ViewModel());

</script>

</body>

</html>

四、依賴跟蹤

接下來讓我們看下如何使用KO中的computed函數(shù)來完成依賴跟蹤。具體例子的實現(xiàn)代碼如下所示：

<!DOCTYPE html>

<head>

</head>

<body>

<div>

<p>First name: <strong data-bind="text: firstName"></strong></p>

<p>First name: <input data-bind="value: firstName" /></p>

<button data-bind="click: capitalizeLastName">LastName To Upper</button>

</div>

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ù)雜點的例子。具體示例代碼如下：

<!DOCTYPE html>

<head>

</head>

<body>

<table>

<thead>

<tr>

<td>Amount</td>

<td>Price</td>

</tr>

</thead>

<tr>

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

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

};

}

// 訂單項類

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

}

ko.applyBindings(new Order());

</script>

</body>

</html>

五、模板

看完以上幾個例子，其實你應(yīng)該感覺到KO（KnockoutJS的簡稱）的上手還是非常簡單的。因為其語法都非常容易理解，接下來看下KO中模板的使用。

<!DOCTYPE html>

<head>

</head>

<body>

<!--<div>

</div>-->

</script>

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>

<head>

</head>

<body>

<h2>Participants</h2>

Here are the participants:

</script>

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來做一個實際的項目，大家不要錯過哦。

更多信息請查看網(wǎng)絡(luò)編程

上一篇：js實現(xiàn)頁面跳轉(zhuǎn)的幾種方法小結(jié)

下一篇：JS學(xué)習(xí)之表格的排序簡單實例

易賢網(wǎng)手機網(wǎng)站地址：KnockoutJs快速入門教程

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)絡(luò)編程

Shell中如何刪除文本比較長的行的實現(xiàn)方法10月30日

vue.js語法及常用指令10月30日

python 讀寫中文json的實例詳解10月30日

Objective-C Json 實例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計實現(xiàn)方法10月30日

python生成二維碼的實例詳解10月30日

Python批量更改文件名的實現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問題10月30日

jQuery實現(xiàn)切換隱藏與顯示同時切換圖標(biāo)功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實例代碼10月30日

vue.js todolist實現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實例代碼10月30日

apache 開啟重定向 rewrite的實現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點安裝教程10月23日

易賢網(wǎng)移動網(wǎng)站

2025國考·省考課程試聽報名

報班類型
姓名
手機號
驗證碼