计算监控(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)的更多相关文章

  1. KnockoutJS 3.X API 第三章 计算监控属性(1) 使用计算监控属性

    计算监控属性(Computed Observables) 如果你有一个监控属性firstName,和另一个lastName,你要显示的全名?可以使用计算监控属性来实现-它依赖于一个或多个其他监控属性, ...

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

    Pure computed observables Pure computed observables是KO在3.2.0版本中推出的.她相对于之前的ComputedObservables有很多改进: ...

  3. 纯计算监控(Pure computed observables)

    纯计算监控,在knockout 3.2.0里才有,提供了对性能和内存更好的管理.这是因为纯计算监控不包含对他的依赖的订阅.特点有: 防止内存泄漏 降低计算开销:值不再是observed,是一个不会重新 ...

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

    新手可忽略此小节,可写依赖监控属性真的是太advanced了,而且大部分情况下都用不到. 一般情况下,计算监控的值是通过其他监控属性的值计算出来的,因此它是只读的.这个看似很奇怪,我们有什么办法可以让 ...

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

    计算监控属性构造参考 计算监控属性可使用以下形式进行构造: ko.computed( evaluator [, targetObject, options] ) - 这种形式是创建一个计算监控属性最常 ...

  6. Knockout 新版应用开发教程之Computed Observables

    Computed Observables 如果你有监控属性firstName和lastName的话,此时如果你想要显示全名? 这个时候computed(以前叫做依赖)监控属性就出马了,这是一个函数用来 ...

  7. Knockout v3.4.0 中文版教程-5-计算监控-使用计算监控

    3. 计算监控 1.使用计算监控 如果你有一个监控的属性firstName和另一个lastName,但你想显示全名怎么办? 这就是引入计算监控的原因-这是依赖于一个或多个其他的observables函 ...

  8. KnockoutJS 3.X API 第三章 计算监控属性(2) 可赋值的计算监控属性

    .liveexample{ padding: 1em; background-color: #eeeedd; border: 1px solid #ccc; max-width: 655px; fon ...

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

    KO是如何实现自动更新的 初学者可以掠过该篇,如果你是一个刨根问底的开发者,那本节将告诉你KO是如何实现依赖追踪和UI自动更新的. 其实很简单,KO的依赖追踪算法如下: 当你声明一个计算监控属性,KO ...

随机推荐

  1. Chrome开发者控制台的这些功能你都知道吗?

    Chrome内置了一些开发者工具,这些工具提供了很多的功能.今天,我们将会专注于JavaScript控制台. 在我编程的过程中,这个控制台为我提供了大量的帮助. 如果你正在电脑端阅读这篇文章,你可以在 ...

  2. AC自动机(AC automation)

    字典树+KMP 参考自: http://www.cppblog.com/mythit/archive/2009/04/21/80633.html ; //字典大小 //定义结点 struct node ...

  3. Recursive - leetcode [递归]

    经验tips: Recursion is the best friend of tree-related problems. 一是只要遇到字符串的子序列或配准问题首先考虑动态规划DP,二是只要遇到需要 ...

  4. As input tri-stated

    前些日子正好看到了riple兄的<一波三折--危险的"未分配"引脚>一文,颇受启发.正好最近也遇上了类似的问题,也可谓一波三折,还好最后摆平了,要不煮熟的鸭子可就要飞了 ...

  5. PyCharm 安装指南

    一.官网下载最新版的PyCharm,根据平台选择版本(Liunx,Windows) 地址:https://www.jetbrains.com/pycharm/download/#section=win ...

  6. BGP多线单IP技术实现形式以及其他双线对比

    自从电信与网通分离之后,北方网通与南方电信网络的互联瓶颈问题一直没有得到很好的解决,这个问题也严重困扰广大的ICP服务商.ICP也只能根据自己网站主流用户群是在南方还是在北方,服务重点是在南方还是北方 ...

  7. redis5--set的操作

    Set集合类型(1)介绍redis的set是string类型的无序集合set元素最大可以包含(2的32次方-1)个元素关于set集合类型除了基本的添加删除操作,其它有用的操作还包含集合的取并集(uni ...

  8. MySQL-Front 出现“程序注册时间到期 程序将被限制模式下运行”解决方式

    MySQL-Front 出现“程序注册时间到期 程序将被限制模式下运行”解决方式 在用mysql-front的时候遇到显示:程序注册时间到期程序将被限制模式下运行.可以在“帮助”菜单下的点“登记”-- ...

  9. MVC模式学习笔记

    一.如何设计一个程序的结构,这是一门专门的学问,叫做“架构模式”(architectural pattern),属于编程的方法论. MVC模式就是架构模式的一种,我觉得它不仅适用于开发软件,也适用于其 ...

  10. HDU 5857 Median

    因为原序列是排列好了的,那么只要看一下给出的两个区间相交的情况,然后分类讨论一下,O(1)输出. #pragma comment(linker, "/STACK:1024000000,102 ...