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