使用计算监控(Using computed observables)
2014-12-31 14:32
441 查看
计算监控(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
相关文章推荐
- 纯计算监控(Pure computed observables)
- KnockoutJS 3.X API 第三章 计算监控属性(4)Pure computed observables
- KnockoutJS 3.X API 第三章 计算监控属性(1) 使用计算监控属性
- jface databinding:延迟计算--ComputedValue和WritableList使用的例子
- UE4在场景中使用预计算可视性(PrecomputedVisibility)
- computed-计算属性的使用和3个特点 方案3
- 详解Vue的computed(计算属性)使用实例之TodoList
- Vue1.0学习总结(3)———vue1.0的生命周期、vue计算属性computed的使用、vue实例(vm)上方法总结、vue结合动画使用
- vue教程2-03 vue计算属性的使用 computed
- 2.4 The Object Model -- Computed Properties and Aggregate Data with @each(计算的属性和使用@each聚合数据)
- 使用QFuture类监控异步计算的结果
- STL使用入门( Using STL) 【转贴】
- 在FreeBSD平台下使用mrtg来监控cpu、内存、交换分区、TCP连接以及本机网卡流量
- 使用RMI编写客户端-服务器应用程序,实现分布式计算
- 【原创】使用LoadRunner监控Apache的步骤
- USING STATIC IMPORTS FOR CONSTANTS AND METHODS(使用静态导入引用常量与方法)
- Precomputed Radiance Transfer计算间接光照
- 市面上所有号称"虚拟机","防火墙"的实时监控杀毒软件无一不是使用的IFSHOOK技术.但是同时也有一些朋友不断写MAIL给我打听如何实现读写的监控.下面给出用VTOOLSD写的代码.也就是所有实时杀毒软件的奥秘.同时,很多拦截文件操作的软件,例如对目录加
- 怎样使用构造一个计算农场
- 不使用任何判断,如if,?:,switch,计算两个数中的最大值!