首页 > 代码库 > Knockout学习笔记(三)
Knockout学习笔记(三)
之前的文章主要针对的是单一的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,这部分可以留作以后研究。