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的Select选择框的华丽变身
Aug 23 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 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顺序查找和二分查找示例
2014/03/27 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
JS与C#编码解码
2013/12/03 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
Python脚本实现集群检测和管理功能
2015/03/06 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
英文自荐信
2013/12/15 职场文书
幼儿园美术教学反思
2014/01/31 职场文书
小学生暑假感言
2014/02/06 职场文书
《海底世界》教学反思
2014/04/16 职场文书
活动倡议书范文
2014/05/13 职场文书
触电现场处置方案
2014/05/14 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
入股协议书范本
2014/11/01 职场文书
超市采购员岗位职责
2015/04/07 职场文书
辩护词格式
2015/05/22 职场文书
上学路上观后感
2015/06/16 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
MySQL派生表联表查询实战过程
2022/03/20 MySQL