首页 > 代码库 > 使用计算监控(Using computed observables)

使用计算监控(Using computed observables)

计算监控(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

 

使用计算监控(Using computed observables)