首页 > 代码库 > 使用计算监控(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)