Knockoutjs之observable和applyBindings的使用

Posted 2020-09-24 星火卓越

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来写文章，因为对其语法不是很熟练，写起来有那么点吃力，不过还好，也没有用到很多的语法。