初学knockoutjs记录4——Computed observables依赖监控（1 Using computed observables使用依赖监控属性）

Computed Observables 依赖监控属性

　　如果你已经有一个firstName的监控属性和另一个lastName的监控属性，你想要显示全名是该怎么办呢？这时就该引入computed observables组合监控属性--它的功能是依赖于一个或多个监控属性，并在任意一个依赖变化时自动更新。

　　例如，给定如下的view model

function AppViewModel(){
  this.firstName = ko.ovservable(‘Bob‘);
  this.lastName = ko.ovservable(‘Smith‘);
}      

　　...你可以在其中增加一个依赖监控属性来返回全名：

function AppViewModel(){
  // .... leave firstName and lastName unchanged...
  
  this.fullName = ko.computed(function(){
        return this.firstName() + " " + this.lastName();
  }, this);
}

　　现在，你可以将其绑定到UI元素上，例如：

The name is <span data-bind="test: fullName"></span>

　　无论什么时候firstName或者lastName变化，其中的fullName都会自动更新（你的依赖监控属性声明的函数会在它的任意一个依赖每次变化时都被调用，任何你返回的值都会被传递给监控属性绑定的UI元素或者其它依赖监控属性）。

Dependency chains just work 依赖工作机制

　　当然，如果你想要，那么你可以为依赖监控属性创建整个依赖链，例如：

　　　　一个叫做items的监控属性表示一个item的集合；

　　　　另外一个叫做selectedIndexes的监控属性用于存储被选中的item的索引；

　　　　一个叫做selectedItems的依赖监控属性返回选中索引（selectedIndexes）对应的item的对象数组；

　　　　另外一个依赖监控属性依赖于任何一个选中的item(selectedItems)是否拥有一些属性（例如being new 或者 being unsaved）来返回true或false，一些UI元素，例如一个按钮，基于这个返回值来决定是enabled或者disabled.

　　改变items或者selectedIndexes会影响到依赖监控属性的依赖链，反过来会更新绑定到它们的UI元素。

Managing ‘this‘ 管理this

　　ko.computed的第二个参数（上边例子中的this）被定义为声明依赖监控属性的this的引用值，没有它，就不能访问到this.firstName()或者this.lastName()。有经验的javascript程序员会认为这是显而易见的，但是对新手来说可能会比较奇怪（C#或Java语言从不要求设置一个this的值，但是javascript需要，因为默认情况下，它们的函数本身并不是任何对象的一部分）

A popular convention that simplifies things 一个约定俗称的规约就是简化

　　有一个普遍的约定就是避免总是去跟踪this: 如果你的viewmodel构造器拷贝this引用到其它变量（通常叫做self）,然后在你的viewmodel中总是使用self,这样你就不用担心this被指向其它地方了，例如

function AppViewModel(){
     var self = this;
     self.firstName = ko.observable(‘Bob‘);
     self.lastName = ko.observable(‘Smith‘);
     self.fullName = ko.computed(function(){
          return self.firstName() + ‘ ‘ + self.lastName();     
    });
}

　　因为self被函数闭包封闭，它在任意内部嵌套函数都是可用和一致的，例如内部的依赖监控属性声明。这一约定非常有用，尤其是在使用事件处理时，你可以看到许多相关的例子

初学knockoutjs记录4——Computed observables依赖监控（1 Using computed observables使用依赖监控属性）

原文：http://www.cnblogs.com/petunsecn/p/4934816.html