KnockoutJs快速入门教程快速入门教程
一、引言一、引言
之前这个系列文章已经介绍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>
<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>
<!--这段脚本实际项目中应该放在对应的JS文件中，然后在html中通过Script标签来引用即可-->
<!--JS代码也就是业务逻辑部分，将业务逻辑与Html代码分割开，使得View代码更加简洁，这样后期也易于维护-->
<script type="text/javascript">
function ViewModel() {
this.firstName = "Tommy";
this.lastName = "Li";
}
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
2. 上面的例子只是完成了单向绑定的操作。即在上面的例子你会发现，当改变input标签中的值并离开焦点时，上面的值不会
更新。其实，KnockoutJS中自动更新功能不会自动添加的，需要对应的函数支持，这个函数就是observable函数，下面具体
看看双向绑定的例子：
资源评论
weixin_38574410
- 粉丝: 8
- 资源: 988
