Home > Article > Web Front-end > Knockoutjs快速入门(经典)_基础知识

Knockoutjs快速入门(经典)_基础知识

WBOYOriginal: 2016-05-16 17:45:481166browse

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

1. Declarative bindings

2. Observables and dependency tracking

3. Templating

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

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

复制代码代码如下:

然后是一个用来显示这个ViewModel的View：

复制代码代码如下:

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

复制代码代码如下:

ko.applyBindings(new ViewModel());

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

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

复制代码代码如下:

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

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

下面再看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也会自动跟着变更。

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

复制代码代码如下:

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

在页面上添加一个按钮:

复制代码代码如下:

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

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 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绑定，如下:

复制代码代码如下:

Name	Amount	Price

Order Price:

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

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

复制代码代码如下:

function Order() { 
//…… 
self.remove = function (item) { 
self.items.remove(item); 
} 

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

给表格加上一列删除按钮：

复制代码代码如下:

Remove

再在表格底部加上一个增加产品的按钮:

复制代码代码如下:

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：javascript+xml实现简单图片轮换(只支持IE)_javascript技巧Next article：可折叠展开的简单目录实现代码_导航菜单

See more

Knockoutjs快速入门(经典)_基础知识

Order Price:

Related articles