正文

使用计算监控（Using computed observables）

IP云
IP云V管理员/0 阅读
11/30
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

计算监控（Computed Observables）

如果有两个监控属性firstName, lastName，此时我们要显示full name，我们要怎么办呢？ 这时，可以创建一个computed observables来实现，其实他就是一个function，根据firstName, lastName计算得到full name。当first name, lastName改变时，fullName也会自动更新。

例如，看下面的view model: 

function AppViewModel() {

    this.firstName = ko.observable('Bob');

    this.lastName = ko.observable('Smith');

}

然后加入full name: 

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="text: fullName"></span>

这样，当firstName或者lastName改变时，fullName都会更改，并且会在UI上进行更新。（此时函数会执行一次）

依赖链

（参考：http://www.cnblogs.com/TomXu/archive/2011/11/22/2256820.html）

理所当然，如果你想你可以创建一个依赖监控属性的链。例如：

  • 监控属性items表述一组列表项
  • 监控属性selectedIndexes保存着被用户选上的列表项的索引
  • 依赖监控属性selectedItems 返回的是selectedIndexes 对应的列表项数组
  • 另一个依赖监控属性返回的true或false依赖于 selectedItems 的各个列表项是否包含一些属性（例如，是否新的或者还未保存的）。一些UI element（像按钮的启用/禁用）的状态取决于这个值）。

然后，items或者selectedIndexes 的改变将会影响到所有依赖监控属性的链，所有绑定这些属性的UI元素都会自动更新。

管理'this'

ko.computed的第二个参数定义了this的值。如果不传这个参数，我们将不可以直接使用this.firstName()和this.lastName().

(下面这句没看懂 http://www.cnblogs.com/TomXu/archive/2011/11/22/2256820.html)

老练的JavaScript 开发人员不觉得this怎么样，但是如果你不熟悉JavaScript，那就对它就会很陌生。(C#和Java需要不需要为set一个值为设置this，但是JavaScript 需要，因为默认情况下他们的函数自身不是任何对象的一部分)。

您也可以不用传this做为参数，而使用一种比较简单的方式实现。就是在viewmodel里把this赋给一个变量（比如叫做 self)，然后我们就可以在viewmodel里的任何地方使用self的值。例如： 

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声明在函数的闭包里，它可以在任何嵌套的函数中使用，包括computed observable。这一点在事件处理时更有用，可以参照示例。

纯计算监控(Pure computed observables)

如果一个计算监控（computed observable），只是根据其他值来计算得到一个值，最好将它声明成ko.pureComputed而不是使用ko.computed。例如： 

this.fullName = ko.pureComputed(function() {

    return this.firstName() + " " + this.lastName();

}, this);

这样做的好处是，knockout可以更有效的对其进行评估及内存使用。当没有其他代码依赖它时，knockout会自动的暂停或者释放这个它。

纯计算属性(pure computed)在knouckout 3.2.0才有。参见：more about pure computed observables.

另外两个属性，前面两章每个都有，这里不写了：

notify: 'always' 扩展， extend({ rateLimit: 50 })扩展

判断属性是否是计算监控属性(Determining if a property is a computed observable)

knockout提供了ko.isComputed来判断。例如： 

for (var prop in myObject) {

  if (myObject.hasOwnProperty(prop) && !ko.isComputed(myObject[prop])) {

      result[prop] = myObject[prop];

  }

}

类似的，knockout还提供了另外两个函数来操作 observables 和 computed observables：

ko.isObservable

ko.isWritableObservable

相关阅读

目录[+]