一、引言

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

二、KnockoutJs是什么？

　　做.NET开发的人应该都知道，WPF中就集成了MVVM框架，关于WPF系列可以参考我WPF系列：http://www.cnblogs.com/zhili/category/624221.html。所以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元素中。

单向绑定

<!DOCTYPE html><html>
<head><meta name="viewport" content="width=device-width" /><title>Demo1-单向绑定</title><script type="text/javascript" src="http://sandbox.runjs.cn/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>

　　在线演示地址：http://sandbox.runjs.cn/show/4nruobca

　　2. 上面的例子只是完成了单向绑定的操作。即在上面的例子你会发现，当改变input标签中的值并离开焦点时，上面的值不会更新。其实，KnockoutJS中自动更新功能不会自动添加的，需要对应的函数支持，这个函数就是observable函数，下面具体看看双向绑定的例子：

<!DOCTYPE html><html>
<head><meta name="viewport" content="width=device-width" /><title>Demo2-双向绑定</title><script type="text/javascript" src="http://sandbox.runjs.cn/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>

　　在线预览地址：http://sandbox.runjs.cn/show/oe58jbs3

四、依赖跟踪

　　接下来让我们看下如何使用KO中的computed函数来完成依赖跟踪。具体例子的实现代码如下所示：

<!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="http://sandbox.runjs.cn/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>

　　在线预览地址：http://sandbox.runjs.cn/show/t8yokfel

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

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

　　在线预览地址为：http://sandbox.runjs.cn/show/109jsjvz

五、模板

　　看完以上几个例子，其实你应该感觉到KO（KnockoutJS的简称）的上手还是非常简单的。因为其语法都非常容易理解，接下来看下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="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head><body><!--模板绑定，div的内容为personTemplate模板内的标签--><!--即最终生成如下标签--><!--<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>

　　在线预览地址为：http://sandbox.runjs.cn/show/3fnpkvrs

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

　　在线预览地址为：http://sandbox.runjs.cn/show/kujxhfgv

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

六、总结

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

　　本文所有源码下载地址：https://code.msdn.microsoft.com/KnockoutJs-d9472ff9

KnockoutJs篇：快速掌握KnockoutJs相关推荐

unity人物旋转移动代码_游戏诞生之日02 - 美术篇快速制作人物动画
在上一篇<游戏诞生之日01 - 美术篇快速搭建和渲染游戏的第一个场景>里,我们得到了一个静态渲染的游戏场景. 接下来我们需要加入人物动画,为游戏注入活力. 第五块拼图 - 动画素材从哪里 ...
第四篇快速、轻量、可扩展、易于使用的EmEditor
第四篇快速.轻量.可扩展.易于使用的EmEditor 最近一直在尝试各种文本编辑器.说实话,以前对文本编辑器没啥要求,普通的也就用Windows自带的记事本了.想要高亮或格式好点的,这时候就会使用E ...
.NET Core实战项目之CMS 第二章入门篇-快速入门ASP.NET Core看这篇就够了
本来这篇只是想简单介绍下ASP.NET Core MVC项目的(毕竟要照顾到很多新手朋友),但是转念一想不如来点猛的(考虑到急性子的朋友),让你通过本文的学习就能快速的入门ASP.NET Core.既 ...
Spring-第一篇-快速入门
学习目标: 本篇文章将会带领大家学习到一些关于spring快速入门的技巧,通过学习,可以达到了解spring到底是干嘛的,如何进行spring程序的编写. 适宜人群: 刚刚学习完javaweb/jsp ...
【收藏】一篇快速帮企业转型区块链的锦囊
无论对于哪一项技术来说,衡量技术成熟的标志都在于这项技术的最终落地.对于区块链这个行业来说,大家最关心的莫过于,什么样的企业适合踏入区块链这个领域?以及什么样的应用可以解决当下企业.用户遇到的一些问题 ...
谈身份管理之进阶篇 - 快速了解从管理到治理的最佳方案
简介: 云上身份安全是当今企业管理者和云上运维团队所面临的挑战之一,针对云上身份管理不全面所产生的风险究竟又哪些?又应当如何应对?本文将结合案例和最佳实践与您分享. 引言云上身份安全是当今企业管理者 ...
[ 利器篇 ] - 快速画一张UML序列图
最近几个项目组的团队进行沟通,有APP交付组的,也有嵌入式设备的交付组,还有云端开发的交付组.几个组一起实现一个涉及APP / Device / Cloud 功能开发,开完讨论会之后,如何用一张图画出 ...
一篇快速入门各程序员都在使用的Typora的基础教程（20分钟快速掌握）
Typora的使用(基础篇) 一.Typora的介绍 1.1 简介 Typora是一款轻便简洁的Markdown编辑器,即在Typora编写时使用Markdown语言.Typora支持即时渲染技术,这 ...
一篇快速解决Nginx Post请求405 (Not Allowed)异常的方案
原因在上一篇提到Failed to load resource: the server responded with a status of 405 (Not Allowed) 少说话上代码: ``` ...

KnockoutJs篇：快速掌握KnockoutJs