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 相关文章推荐
jquery设置控件位置的方法
Aug 21 Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
vue之将echart封装为组件
Jun 02 Javascript
Angular6新特性之Angular Material
Dec 28 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
php学习之 数组声明
2011/06/09 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
Yii分页用法实例详解
2014/12/04 PHP
php检测url是否存在的方法
2015/04/14 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
Python中的类学习笔记
2014/09/23 Python
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python实现的tab文件操作类分享
2014/11/20 Python
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python socket模块方法实现详解
2019/11/05 Python
Django继承自带user表并重写的例子
2019/11/18 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
Python正则表达式学习小例子
2020/03/03 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
省文明单位申报材料
2014/05/08 职场文书
升职演讲稿范文
2014/05/23 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
学雷锋倡议书
2015/01/19 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python