KnockoutJs快速入门教程

来源：阅读：1228 次日期：2016-06-27 16:31:40

温馨提示：小编为您整理了“KnockoutJs快速入门教程”,方便广大网友查阅！

这篇文章主要为大家分享了KnockoutJs快速入门教程，了解KnockoutJs到底是什么？如何使用KnockoutJS中的data-bind语法来将模型数据绑定到DOM元素中，感兴趣的小伙伴们可以参考一下

一、引言

之前这个系列文章已经介绍Bootstrap，详情请查看本文：《Bootstrap入门教程》，由于最近项目中，前端是Asp.net MVC + KnockoutJs + Bootstrap来做的。所以我又重新开始写这个系列。今天就让我们来看看Web前端的MVVM框架——KnockoutJs。

二、KnockoutJs是什么？

做.NET开发的人应该都知道，WPF中就集成了MVVM框架，所以KnockoutJs也是针对Web开发的MVVM框架。关于MVVM好处简单点来说就是——使得业务逻辑代码与页面展示代码分割开，使得前端项目更好维护。

之前，我们写Web页面的时候，JS代码和Html代码混合在一起，并且代码中充斥着大量的DOM对象的操作。这样代码结构非常混乱。有了MVVM框架了，你可以将JS代码和Html代码分割开，并且数据操作部分更加简单，只需要通过相应的语法（data-bind）绑定到对应的标签属性显示即可，从而加快开发速度。

KnockoutJs也就是这样一个MVVM框架。其实与其称其框架，更准备地应该是一个MVVM类库。因为它没有MVVM框架是一个比较“重”的概念，其中应该包括路由等特性。而KnockoutJS中却没有，相比较，AngularJS应该称为一个MVVM框架更加合适。

KnockoutJS主要实现的功能有以下4点：

声明式绑定（Declarative Bindings）：使用简单的语法将模型数据关联到DOM元素上。即"data-bind"语法

依赖跟踪（Dependency Tracking）：为转变和联合数据，在模型数据之间建立关系。如商品总价是由各个商品项价格之和。此时商品总价和商品项就可以使用依赖跟踪功能来建立关系。即由各个商品项的总价相加而得出。这种关系由KnockoutJs中computed函数完成。

UI界面自动刷新(Automatic UI Refresh)：当你的模型状态改变时，UI界面的将自动更新。这点由observable函数完成。

模板(Templating)：为您的模型数据快速编写复杂的可嵌套UI。和WPF中模板的概念类似。

接下来，我们通过具体的例子来让大家快速掌握KnockoutJs的使用。

三、声明式绑定

下面让我们看下如何使用KnockoutJS中的data-bind语法来将模型数据绑定到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. 上面的例子只是完成了单向绑定的操作。即在上面的例子你会发现，当改变input标签中的值并离开焦点时，上面的值不会更新。其实，KnockoutJS中自动更新功能不会自动添加的，需要对应的函数支持，这个函数就是observable函数，下面具体看看双向绑定的例子：

<!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函数来完成依赖跟踪。具体例子的实现代码如下所示：

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

接下来，让我们看一下使用声明式绑定和依赖跟踪复杂点的例子。具体示例代码如下：

<!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 学习笔记", 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>

五、模板

看完以上几个例子，其实你应该感觉到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>

关于模板更多的使用参考官方文档：http://knockoutjs.com/documentation/template-binding.html。本文只列出了2中模板的使用。

六、总结

到此，KnockoutJs的快速入门的内容就结束了，在下一篇文章中继续为大家介绍KO内容，下一篇文章的内容将介绍如何使用KO来做一个实际的项目，大家不要错过哦。

上一篇：js实现页面跳转的几种方法小结

下一篇：JS学习之表格的排序简单实例

手机网站地址：KnockoutJs快速入门教程

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！