Knockoutjs快速入门(经典)


Posted in Javascript onDecember 24, 2012

Knockoutjs是一个JavaScript实现的MVVM框架。主要有如下几个功能:

1. Declarative bindings

2. Observables and dependency tracking

3. Templating

它对于分离前台的业务逻辑和视图简化数据绑定过程有显著的作用。闲言少叙,直接看例子,如何下载也不说了,如果用VS开发的话用Nuget就可以一键搞定。

1.基本绑定和依赖跟踪
首先需要定义一个ViewModel:

<script type="text/javascript"> 
function ViewModel() { 
this.firstName = "Zixin"; 
this.lastName = "Yin"; 
} 
</script>

然后是一个用来显示这个ViewModel的View:
<div> 
<p data-bind="text: firstName"></p> 
<p data-bind="text: firstName"></p> 
<input data-bind="value: firstName"/> 
<input data-bind="value: lastName"/> 
</div>

从这个view中可以看到声明式绑定的含义,只需要在标签上使用data-bind属性,就可以将数据的值绑定到相应的地方。有了View和ViewModel还需要代码将这两者关联起来:
ko.applyBindings(new ViewModel());

将他们放到一起,注意,applyBinding那代码必须在页面全部加载完之后执行。页面显示为:

Knockoutjs快速入门(经典)

下面再看observables,这个功能不是与生俱来的,必须要把View Model设置为observable,方法如下:

function ViewModel() { 
this.firstName = ko.observable("Zixin"); 
this.lastName = ko.observable("Yin"); 
}

其他都不需要改变,这时候,如果改变输入框中的值,当焦点离开的时候,可以发现p中的值也跟着改变了:

Knockoutjs快速入门(经典)

下面再看dependency tracking,也就是如果一个值依赖多各值,其中任何一个值发生变化,它都会自动发生变化. 这是通过computed方法实现的,代码如下:

function ViewModel() { 
this.firstName = ko.observable("Zixin"); 
this.lastName = ko.observable("Yin"); 
this.fullName = ko.computed(function () { return this.lastName() + " " + this.firstName(); },this); 
}

注意获得一个observable的值是一个函数调用。这样当first 或者last name发生变更的时候fullName也会自动跟着变更。

Knockoutjs快速入门(经典)

也可以通过代码改变observable的值,页面会自动刷新:

function ViewModel() { 
//……… 
this.capitalizeLastName = function () { 
this.lastName(this.lastName().toUpperCase()); 
} 
}

在页面上添加一个按钮:
<button data-bind="click: capitalizeLastName">Caps</button>

点击按钮之后便会出发viewmodel的capitalizeLastName方法,要改变一个observable的值的方法就是将新值作为函数调用的参数。点击之后:

Knockoutjs快速入门(经典) 

2. 列表绑定

加入我们有如下的订单ViewModel,使用observableArray来跟踪数组的变化。

var products=[{name:"Thinkpad X1",price:9000}, 
{name:"Hp ProBook",price:5555}, 
{name:"Mouse",price:45} ]; function Order() { 
var self = this; 
self.items = ko.observableArray([ 
//This data should load from server 
new Item(products[0], 1), 
new Item(products[1],2)]); 
self.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); 
}

Order里面的Item实际上应该是从服务器获得的,Item定义如下:
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); 
}

ViewModel准备好之后,就可以实现View。这次需要使用foreach绑定,如下:
<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> 
</tr> 
</tbody> 
</table> 
<h3>Order Price:<span data-bind="text: price"></span></h3>

这样一个基本的订单页面就好了,能够选择数量,价格会自动更新:

Knockoutjs快速入门(经典)

下面给订单加上增删产品的功能,先给Order加上如下的方法:

function Order() { 
//…… 
self.remove = function (item) { 
self.items.remove(item); 
} self.addMouse = function () { 
self.items.push(new Item(products[2],1)); 
} 
}

给表格加上一列删除按钮
<td><a href="#" data-bind="click: $root.remove">Remove</a></td>

再在表格底部加上一个增加产品的按钮:
<button data-bind="click: addMouse">Add a Mouse</button>

这时候,observableArray的功能就体现了,当你点击删除按钮或者底部的按钮的时候,页面节点会跟着变化,而不需要手动更新DOM节点,这使得前端的JS大大简化。

Knockoutjs快速入门(经典)

Javascript 相关文章推荐
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 #Javascript
javascript 星级评分效果(手写)
Dec 24 #Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 #Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 #Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 #Javascript
ajax中get和post的说明及使用与区别
Dec 23 #Javascript
javascript 全选与全取消功能的实现代码
Dec 23 #Javascript
You might like
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
nodejs基础知识
2017/02/03 NodeJs
React学习笔记之事件处理(二)
2017/07/02 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python random模块常用方法
2014/11/03 Python
使用Python的内建模块collections的教程
2015/04/28 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
python环境下安装opencv库的方法
2020/03/05 Python
Python request使用方法及问题总结
2020/04/26 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
资金主管岗位职责范本
2014/03/04 职场文书
项目经理任命书
2014/06/04 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python