KnockoutJs学习笔记（三）

以前的文章主要针对的是单一的observable（即使是observableArray也是一种observable），而文档Using computed observables则主要是针对ko.computed这一function，它可以将多个observable联系起来，不管这些observable中的哪一个发生了变化，ko.computed也会发生相应的变化并将结果反应在UI中。

首先，建立一个view model以下：

1 function MyViewModel() {
2 　　this.firstName = ko.observable("Chiaki");
3 　　this.lastName = ko.observable("Izumi");
4 }

须要注意的是，这里建立的是一个view model的构造函数，而不是像前两篇文章同样直接建立的object，其中的区别有待研究。

咱们能够在这个构造函数中添加一个computed observable，并激活bindings，js部分以下：

1 function MyViewModel() {
2 　　this.firstName = ko.observable("Chiaki");
3 　　this.lastName = ko.observable("Izumi");
4 　　this.fullName = ko.computed(function() {
5 　　　　return this.firstName()+ " " + this.lastName();
6 　　}, this);
7 }
8 
9 ko.applyBindings(new MyViewModel());

在html文件中添加p元素做为测试：

1 <p>The fullname is: <span data-bind="text: fullName"></span></p>

页面显示以下：

每当firstName或是lastName中至少一个变化的时候，就会调用一次ko.computed来生成fullName并反映在UI中。

从以上示例中也能够看到，ko.computed有两个参数，第一个是联系两个observable并生成fullName的函数，第二个是this。第二个参数指定了第一个参数中的this的值（这个看起来的确有些怪异，能够留做之后研究），按照文档中的说法，javascript中的函数在默认状况下并非object的一部分，因此须要指定this的值。

也有一种通用的简化方式，即将this在构造函数一开始就赋给另外一个变量，这样在以后须要用到this的部分便可以经过调用另外一个变量来实现：

1 function MyViewModel() {
2 　　var self = this;
3 
4 　　self.firstName = ko.observable("Chiaki");
5 　　self.lastName = ko.observable("Izumi");
6 　　self.fullName = ko.computed(function() {
7 　　　　return self.firstName()+ " " + self.lastName();
8 　　});
9 }

我的分析，之因此可以经过这种方式来简化，跟javascript中的this机制有关，可能在javascript中每当遇到一个this的时候就分析当前的object究竟是哪一个，进而对this进行替代，可是进入到ko.computed函数里面以后，因为函数并不算是object的一部分，this的值也就再也不是当前的object(MyViewModel)，而变成了window，使用self之后就涉及到闭包的问题了，使得self的值并不会更改，这个能够留做之后研究。

若是computed observable知识基于一些observable的简单计算的话，使用pureComputed会比computed更好，以下：

1 self.fullName = ko.pureComputed(function() {
2 　　return self.firstName()+ " " + self.lastName();
3 })

有关pureComputed的部分留做以后研究。

咱们也能够对computed或是pureComputed进行强制订阅，以下：

1 self.fullName = ko.pureComputed(function() {
2 　　return self.firstName()+ " " + self.lastName();
3 }).extend({notify: "always"});

注意到"."是在pureComputed这一function以后的。

一样的，能够经过调用extend方法中的rateLimit属性来指定响应的延时。

在某些时候，咱们可能须要断定某个变量究竟是不是computed observable，这时能够用到ko.isComputed来进行判断，相似的方法还包括isObservablem，isWritableObservable等，其中isObservable对于observables、observable arrays、computed observables均会返回true；isWritableObservable对于observables、observable arrays、writable computed observables均会返回true，这部分能够留做之后研究。