Knockout学习笔记（三）

标签：style   blog   http   color   java   使用   io   文件   

之前的文章主要针对的是单一的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，这部分可以留作以后研究。

Knockout学习笔记（三）,布布扣,bubuko.com

Knockout学习笔记（三）

标签：style   blog   http   color   java   使用   io   文件   

原文地址：http://www.cnblogs.com/charlieyuki/p/3928054.html