Knockoutjs之observable和applyBindings的使用
observable在Knockoutjs中属于一个核心功能,在做监控数据的改变时,必须要用到Knockoutjs的监控属性——observable
。
ko.observable()
的简单使用
首先来看一个例子:
var a = ko.observable('hello Knockoutjs!');
console.log(a()); // hello Knockoutjs!
a('This is Knockoutjs!');
console.log(a()); // This is Knockoutjs!
从上面的例子可以看出ko.observable()
会先设置值再返回一个函数赋给变量a,变量a则变成了监控属性了,然后可以通过a()
来获取值,通过a('foo')
来改变值。
创建带有监控属性的View Model
创建View Model有两种方式:
- 声明一个对象;
- 使用new关键词实例化函数。
如:
// 直接声明一个对象的方式
var viewmodel = {
name: ko.observable('satrong'),
job: ko.observable('web dever')
};
// 使用new关键词实例化一个函数的方式
var Viewmodel = function(){
this.name = ko.observable('satrong');
this.job = ko.observable('web dever');
};
var viewmodel = new Viewmodel();
创建View Model之后,再创建一个简单的HTML视图
<div data-bind="text:name"></div>
<div data-bind="text:job"></div>
<div><input type="value:job" /></div>
在视图中我们需要使用data-bind
将刚刚创建的viewmodel和HTML关联到一起,但由于浏览器不能识别data-bind
的作用,所以我们必须还需要使用ko.applyBindings(viewmodel);
来激活Knockout,这一步是必不可少的。
ko.applyBindings
参数的介绍
ko.applyBindings
可接受两个参数:
- 第一个参数属于必备参数,即前面我们创建的View Model;
- 第二个参数可选,是指Knockout控制HTML的范围。如果为空则默认为document,如果需要指定可以通过document.getElementById('元素的ID')来设置。
在使用ko.applyBindings
时可能遇到的问题:
- 提示“You cannot apply bindings multiple times to the same element.”,意思是在同一个元素上不能进行重复绑定,所以要设置好第二个参数的范围。
- 在元素上已经添加了某些事件,但使用了
ko.applyBindings
后添加的事件不起作用。个人理解是这样的,在使用ko.applyBindings
后,ko会将所指定范围内的所有元素上的事件清除掉(或者是其他原因清除掉了事件),所以为了保留我们所添加的事件我们可以在ko.applyBindings
之后再添加事件。
Knockout中的链式写法
正如我们前面定义的viewmodel:
var viewmodel = {
name: ko.observable('satrong'),
job: ko.observable('web dever')
};
如果我们想修改name
和job
的值,可能会这样写道:
viewmodel.name('chc');
viewmodel.job('secret');
为了方便和简化写法,就像jQuery的$('#test').find('a').eq(0)
这种写法,ko当然也是少不了的,所以上面的写法我们可以这样简化:
viewmodel.name('chc').job('secret');
第一次使用Markdown来写文章,因为对其语法不是很熟练,写起来有那么点吃力,不过还好,也没有用到很多的语法。