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函数，下面具体看看双向绑定的例子：
<!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>
四、依赖跟踪
接下来让我们看下如何使用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="/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>
接下来，让我们看一下使用声明式绑定和依赖跟踪复杂点的例子。具体示例代码如下：
<!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>
五、模板
看完以上几个例子，其实你应该感觉到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="/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>
<!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://knockoutjs.com/documentation/template-binding.html。本文只列出了2中模板的使用。
六、总结
到此，KnockoutJs的快速入门的内容就结束了，在下一篇文章中继续为大家介绍KO内容，下一篇文章的内容将介绍如何使用KO来做一个实际的项目，大家不要错过哦。
相关推荐
-
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4的语法,虽然没有完全掌握,但是算是有了一个大致的了解.于是乎有了今天的这篇文章:通过T4模板快速生成页面. KnockoutJS系列文章: BootstrapTable与KnockoutJS相结合实现增删改查功能[一] BootstrapTable与KnockoutJS相结合实现增删改查功能[二]
-
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
在上篇文章给大家介绍了BootstrapTable与KnockoutJS相结合实现增删改查功能[一],介绍了下knockout.js的一些基础用法.接下来通过本文继续给大家介绍.如果你也打算用ko去做项目,且看看吧! Bootstrap是一个前端框架,解放Web开发者的好东东,展现出的UI非常高端大气上档次,理论上可以不用写一行css.只要在标签中加上合适的属性即可. KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己
-
Knockoutjs 学习系列(一)ko初体验
MVVM框架中Angular是好,但这么大而全的框架,学习难度可不低呢,上手起码也得要个一两周吧.而knockoutjs专注于数据绑定,只需一两天就可以投入使用了,学习成本不要太低!在前端进化如此迅速的时代,学习成本也是不得不考虑的一个因素.很多时候其实我们的项目并没那么复杂,也并不需要万能的框架,更需要的反而是简单顺手的工具. Before Knockoutjs 假设我们做一个订单系统,需要显示商品单价,然后可以根据输入数量计算出总价并显示出来.使用原生代码也很容易实现,效果: 代码如下: <
-
knockoutjs模板实现树形结构列表
数据结构 /*数据*/ var ko_vue_data=[ { name: "总能耗", number:"0", energyone: 14410, energytwo: 1230, energythree: 1230, huanRatio: -36.8, tongRatio: 148.5, child: [ { name: "租户电耗", number:"1", energyone: 14410, energytwo: 12
-
KnockoutJs快速入门教程
一.引言 之前这个系列文章已经介绍Bootstrap,详情请查看本文: <Bootstrap入门教程> ,由于最近项目中,前端是Asp.net MVC + KnockoutJs + Bootstrap来做的.所以我又重新开始写这个系列.今天就让我们来看看Web前端的MVVM框架--KnockoutJs. 二.KnockoutJs是什么? 做.NET开发的人应该都知道,WPF中就集成了MVVM框架,所以KnockoutJs也是针对Web开发的MVVM框架.关于MVVM好处简单点来说就是--使得业
-
jQuery Easyui快速入门教程
1.什么是JQuery EasyUI jQuery EasyUI是一组基于JQuery的UI插件集合,而JQueryEasyUI的目标就是帮助开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的JavaScript,也不需要对css样式有深入的了解,开发者需要了解的只是一些简单的html标签. 2.学习jQuery EasyUI的条件 因为JQueryEasyUI是基于jQuery的UI库,所以,必须需要JQuery课程的基础. 3.JQuery EasyUI的特点 基于JQu
-
OpenStack云计算快速入门教程(1)之OpenStack及其构成简介
该教程基于Ubuntu12.04版,它将帮助读者建立起一份OpenStack最小化安装.我是五岳之巅,翻译中多采用意译法,所以个别词与原版有出入,请大家谅解.我不是英语专业,我觉着搞技术最重要的就是理解,而不是四级和考研中那烦人的英译汉,所以我的目标是忠于原意.通俗表达,Over.英文原文在这里(http://docs.openstack.org/es@***/openstack-compute/starter/content/ ,请将ex@***中的@去掉,CU屏蔽的F词),下面步入正题: 第
-
ReactJs快速入门教程(精华版)
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点长,耐心读完,你会有很大收获哦~ 一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西
-
Yii2框架制作RESTful风格的API快速入门教程
先给大家说下什么是REST restful REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次出现在2000年Roy Fielding的博士论文中,Roy Fielding是HTTP规范的主要编写者之一. 他在论文中提到:"我这篇文章的写作目的,就是想在符合架构原理的前提下,理解和评估以网络为基础的应用软件的架构设计,得到一个功能强.性能好.适宜通信的架构.REST指的是一组架构约束条件和原则." 如
-
Vue.js快速入门教程
像AngularJS这种前端框架可以让我们非常方便地开发出强大的单页应用,然而有时候Angular这种大型框架对于我们的项目来说过于庞大,很多功能不一定会用到.这时候我们就需要评估一下使用它的必要性了.如果我们仅仅需要在一个简单的网页里添加屈指可数的几个功能,那么用Angular就太麻烦了,必要的安装.配置.编写路由和设计控制器等等工作显得过于繁琐. 这时候我们需要一个更加轻量级的解决方案.Vue.js就是一个不错的选择.Vue.js是一个专注于视图模型(ViewModal)的框架.视图模型是U
-
Vue.js 60分钟快速入门教程
vuejs是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新. 当
-
Java的JNI快速入门教程(推荐)
1. JNI简介 JNI是Java Native Interface的英文缩写,意为Java本地接口. 问题来源:由于Java编写底层的应用较难实现,在一些实时性要求非常高的部分Java较难胜任(实时性要求高的地方目前还未涉及,实时性这类话题有待考究). 解决办法:Java使用JNI可以调用现有的本地库(C/C++开发任何和系统相关的程序和类库),极大地灵活Java的开发. 2. JNI快速学习教程 2.1 问题: 使用JNI写一段代码,实现string_Java_Test_helloworld
-
Jupyter notebook快速入门教程(推荐)
本文主要介绍了Jupyter notebook快速入门教程,分享给大家,具体如下: 本篇将给大家介绍一款超级好用的工具:Jupyter notebook. 为什么要介绍这款工具呢? 如果你想使用Python学习数据分析或数据挖掘,那么它应该是你第一个应该知道并会使用的工具,它很容易上手,用起来非常方便,是个对新手非常友好的工具.而事实也证明它的确很好用,在数据挖掘平台 Kaggle 上,使用 Python 的数据爱好者绝大多数使用 jupyter notebook 来实现分析和建模的过程,因此,
-
Navicat使用快速入门教程
学习数据库的时候,经常接触到 navicat 这个管理数据库的工具.下面介绍这个数据库管理工具的使用. 一. 连接使用 1.1 连接数据库 打开 navicat ,点击 连接 ,选择 数据库 弹出以下界面 (以MySQL为例),熟悉各部分的作用 测试是否可以连接,有以下提示,点击确定开始使用数据库 双击 或 右键 打开连接,图标变亮表示已经打开连接 1.2 操作数据库 右键 连接 ,点击 新建数据库 输入 数据库名 和 编码规则 双击 或 右键 打开数据库(灰色图标变亮表示打开) 二. 导入备份