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，這部分能夠留做之後研究。