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,这部分可以留作以后研究

posted @ 2014-08-21 20:56  CharlieYuki  阅读(305)  评论(0编辑  收藏  举报