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

时间: 2024-10-07 00:38:44

使用计算监控(Using computed observables)的相关文章

初学knockoutjs记录8——Computed observables依赖监控(5 Computed Observables Reference 计算监控属性参考)

Computed Observables Reference 计算监控属性参考 下述文档描述了怎样构造和使用计算监控属性. Constructing a computed ovservable 构造计算监控属性 一个计算监控属性可以使用下列任一方式进行构造: 1. ko.computed ( evaluator [, targetObject, options] ) -- 这种方式是创建计算监控属性最常用的方式,支持大多数场景. evaluator -- 一个函数用来评估计算当前计算监控属性的值

初学knockoutjs记录5——Computed observables依赖监控(2 Writable computed observables可写计算监控属性)

Writable computed observables 可写计算监控属性 可写监控属性的要求较高,并且在大多数场合下并不常用. 一般来说,计算监控属性拥有一个有其它监控属性计算得来的值,也正因如此它是通常是只读的,看起来很奇怪,但是,确实有可能让计算监控属性成为可写的,你只需要提供回调函数合理的使用可写的值做一些事情. 你可以像常规的监控属性那样使用计算监控属性,只要你有自定义的逻辑用来截获所有的读写操作.就像普通监控属性一样,你可以使用链接语法编写拥有多个监控属性或计算监控属性的对象模型,

初学knockoutjs记录7——Computed observables依赖监控(4 Pure computed observables 纯计算监控属性)

Pure computed observables 纯计算监控属性 纯计算监控属性在knockout3.2.0中引入,给在大多数场合下常规的计算监控属性提供了一个速度和内存性能更好选择.这是因为纯计算监控属性在它本身没有被订阅的情况下不需要维护它的依赖. 它的特性: Prevents memore leaks 防止内存泄露.纯计算监控属性不再是一个程序引用,但是它的整个依赖依然存在. Reduces computation oberhead 减少计算开销.当值不再被监控时不再进行计算监控属性的计

KnockoutJS 3.X API 第三章 计算监控属性(4)Pure computed observables

Pure computed observables Pure computed observables是KO在3.2.0版本中推出的.她相对于之前的ComputedObservables有很多改进: 防止内存泄漏 减少计算开销 在PureComputed函数中,随着相关监控属性值变化的时候,在两种状态之间切换. 每当它没有 值变化的时候,它处于睡眠状态.当进入睡眠状态时,其配置的所有订阅它的依赖.在这种状态下,它不会订阅任何监控属性.如果当它被读取,返回的也是睡眠状态的值. 每当它的 值变化的时

可写的计算监控(Writable computed observables)

新手可忽略此小节,可写依赖监控属性真的是太advanced了,而且大部分情况下都用不到. 一般情况下,计算监控的值是通过其他监控属性的值计算出来的,因此它是只读的.这个看似很奇怪,我们有什么办法可以让他变成可写的吗. 此时,我们只需要提供一个callback的函数就可以做到. 通过你自定义的逻辑拦所有的读写操作,你可以像使用其他监控属性一样使用计算监控属性.类似obeservables一样,你可以一次改变多个observable或者computered observable属性的值,通过以下这种

纯计算监控(Pure computed observables)

纯计算监控,在knockout 3.2.0里才有,提供了对性能和内存更好的管理.这是因为纯计算监控不包含对他的依赖的订阅.特点有: 防止内存泄漏 降低计算开销:值不再是observed,是一个不会重新计算的computed observables. 根据是否有订阅,pure computed observable会自动在两状态间进行切换: 1. 当没有订阅者(subscribers)时,是sleeping状态.当进入sleeping状态时,会释放所有依赖的订阅.在这个状态期间,它不会订阅任何在函

KnockoutJS 3.X API 第三章 计算监控属性(5) 参考手册

计算监控属性构造参考 计算监控属性可使用以下形式进行构造: ko.computed( evaluator [, targetObject, options] ) - 这种形式是创建一个计算监控属性最常见的情况. evaluator - 用于返回计算值的函数. targetObject-如果给出定义的值this时KO调用回调函数.参见部分第三章 计算监控属性(1) 使用计算监控属性以获取更多信息. options - 计算监控属性的其他属性的对象.请参见下面的完整列表. ko.computed(

KnockoutJS 3.X API 第三章 计算监控属性(3) KO如何实现依赖追踪

KO是如何实现自动更新的 初学者可以掠过该篇,如果你是一个刨根问底的开发者,那本节将告诉你KO是如何实现依赖追踪和UI自动更新的. 其实很简单,KO的依赖追踪算法如下: 当你声明一个计算监控属性,KO立即调用其相关的函数来获取其初始值. 当相关函数正在运行,KO将建立一个订阅到相关监控属性(包括其他计算监控属性)并读取他们的值.订阅回调函数设置为订阅函数再次运行,循环的这个过程. 当有新的值,KO会通知你的计算监控属性将值反馈给用户. 采用PEEK控制依赖 Knockout的自动依赖跟踪通常不是

Knockoutjs官网翻译系列(三) 使用Computed Observables

书接上回,前面谈到了在视图模型中可以定义普通的observable属性以及observableArray属性实现与UI元素的双向绑定,这一节我们继续探讨第三种可实现绑定的属性类型:computed observables,我称它为计算observable(说实话关于observable怎么翻译我还真拿不准). 要是你在视图对象中已经定义了一个叫firstName的observable属性和一个叫lastName的observable属性,而你想显示这个人的全名那要如何处理呢?这种情况下就到了co