首页 > 代码库 > Knockoutjs之observable和applyBindings的使用
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来写文章,因为对其语法不是很熟练,写起来有那么点吃力,不过还好,也没有用到很多的语法。
Knockoutjs之observable和applyBindings的使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。