KnockoutJS 3.X API 第三章 计算监控属性(1) 使用计算监控属性
计算监控属性(Computed Observables)
如果你有一个监控属性firstName
,和另一个lastName
,你要显示的全名?可以使用计算监控属性来实现-它依赖于一个或多个其他监控属性,每当这些依赖关系的监控属性改变时将会自动更新计算监控属性。
例如,下面的视图模型:
function AppViewModel() {
this.firstName = ko.observable('Bob');
this.lastName = ko.observable('Smith');
}
可以添加一个计算监控属性来返回全名:
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>
这里的fullname将会根据firstname和lastname的改变而改变。
管理”this”关键字
上面的例子中,ko.computed通过
定义的this调用视图模型中的其他监控属性
。有经验的JavaScript程序员会认为这是很正常的调用,但如果你是个JS初学者会仍然觉得看起来很奇怪。
其中一种流行的方式是,将this关键字赋值给一个JS变量,比如var self,然后使用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();
});
}
升级版计算监控属性(pureComputed)
在KnockoutJS 3.X中新增加了pureComputed方法,该方法是在Computed方法的基础上改良而来的。其主要作用是防止内存泄露,其次是减少没有必要的计算的开销
this.fullName = ko.pureComputed(function() {
return this.firstName() + " " + this.lastName();
}, this);
强制计算监控属性实时通知用户
当赋值一个包含原始值(一个数字,字符串,布尔值,或者为null)监控属性,使用内置的notified ,以确保一个观测监控属性的用户总是得到通知,即使该值是相同的。
myViewModel.fullName = ko.pureComputed(function() {
return myViewModel.firstName() + " " + myViewModel.lastName();
}).extend({ notify: 'always' });
延缓或抑制更改通知
通常情况下,监控属性值改变会立即通知其用户。但是,如果一个监控属性频繁更新会带来高昂的数据传输代价,你可以通过限制或延迟变更通知获得更好的性能。这是通过使用rateLimit增量实现:
// Ensure updates no more than once per 50-millisecond period
myViewModel.fullName.extend({ rateLimit: 50 });
排除计算监控属性
在某些情况下,您可能要排除一些计算监控属性,防止其发送回服务器。当然可以使用编程方式确定那些监控属性是计算监控属性,然而KO提供了一个实用函数,ko.isComputed
以帮助判断那些是计算监控属性。例如:
for (var prop in myObject) {
if (myObject.hasOwnProperty(prop) && !ko.isComputed(myObject[prop])) {
result[prop] = myObject[prop];
}
}
除此之外,KO还提供了一些其他的很有用的函数:
- ko.isObservable : 对于所有的observable,observable array,computed observable将返回true;
- ko.isWritableObservable : 对于所有的observable,observable array,writable computed observable返回true;
当计算监控属性只用于UI展示
如果您只需要在界面中使用计算监控属性,你可以声明为:
function AppViewModel() {
// ... leave firstName and lastName unchanged ... this.fullName = function() {
return this.firstName() + " " + this.lastName();
};
}
UI调用可以使用如下方式调用:
The name is <span data-bind="text: fullName()"></span>
KnockoutJS 3.X API 第三章 计算监控属性(1) 使用计算监控属性的更多相关文章
- KnockoutJS 3.X API 第三章 计算监控属性(5) 参考手册
计算监控属性构造参考 计算监控属性可使用以下形式进行构造: ko.computed( evaluator [, targetObject, options] ) - 这种形式是创建一个计算监控属性最常 ...
- KnockoutJS 3.X API 第三章 计算监控属性(3) KO如何实现依赖追踪
KO是如何实现自动更新的 初学者可以掠过该篇,如果你是一个刨根问底的开发者,那本节将告诉你KO是如何实现依赖追踪和UI自动更新的. 其实很简单,KO的依赖追踪算法如下: 当你声明一个计算监控属性,KO ...
- KnockoutJS 3.X API 第三章 计算监控属性(2) 可赋值的计算监控属性
.liveexample{ padding: 1em; background-color: #eeeedd; border: 1px solid #ccc; max-width: 655px; fon ...
- KnockoutJS 3.X API 第三章 计算监控属性(4)Pure computed observables
Pure computed observables Pure computed observables是KO在3.2.0版本中推出的.她相对于之前的ComputedObservables有很多改进: ...
- KnockoutJS 3.X API 第七章 其他技术(4) 速率限制
注意:这个速率限制API是在Knockout 3.1.0中添加的. 通常,更改的observable立即通知其订户,以便依赖于observable的任何计算的observable或绑定都会同步更新. ...
- KnockoutJS 3.X API 第六章 组件(4) 自定义元素
自定义元素提供了一种将组件注入视图的方便方法. 本节目录 介绍 例子 传递参数 父组件和子组件之间的通信 传递监控属性的表达式 将标记传递到组件中 控制自定义元素标记名称 注册自定义元素 备注1:将自 ...
- KnockoutJS 3.X API 第六章 组件(3) 组件绑定
组件绑定将指定的组件注入到元素中,并且可选地将参数传递给它. 本节目录 一个例子 API 组件生命周期 备注1:仅限模板组件 备注2:使用没有容器元素的组件 备注3:将标记传递给组件 处置和内存管理 ...
- KnockoutJS 3.X API 第六章 组件(2) 组件注册
要使Knockout能够加载和实例化组件,必须使用ko.components.register注册它们,从而提供如此处所述的配置. 注意:作为替代,可以实现一个自定义组件加载器(自定义加载器下一节介绍 ...
- KnockoutJS 3.X API 第六章 组件(5) 高级应用组件加载器
无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...
随机推荐
- AD6.8_mcu123 分享地址
http://yunpan.cn/Qi3WrPPzEC2hI 访问密码 c07d
- CentOS详解top命令各个数据的含义
最近在docker(宿主机是centos虚拟机)里安装gitlab,发现随着时间的运行,虚拟机的内存持续走高,运行几个小时之后内存已经爆掉了,putty远程处理于假死状态. 这个时候就需要查看内存进程 ...
- 超级编辑器--VIM的常见操作
如下,都是我常用的 删除单词: d + w 关闭vim窗口: :q 或者 shift + zz 全部向左移: shift + v ---> shift + < ---&g ...
- 剑指offer算法_位运算求和
不用+,-,*,/运算求和,可以分成三步: 1.计算两个数字的异或值,相当于只计算每一位的和,不计算进位,得出结果sum: 2.计算两个数字的与值,相当于求出两个数字的进位,然后左移一位,相当于进位, ...
- c#编程指南(十) 平台调用P-INVOKE完全掌握, 字符串和指针
可以说新手使用P-INVOKE最开始的头疼就是C#和C++的字符串传递,因为这里涉及到两个问题. 第一:C#的string和C++的字符串首指针如何对应. 第二:字符串还有ANSI和UNICODE(宽 ...
- Sublime Text 3专题
MarkDown语法记笔记 1.下载&&安装 下载 常用插件安装 Submlit使用教程 [如何优雅地使用Sublime Text3] 2.Sublime Text 便捷技巧 [以PH ...
- UICollectionView(集合视图)以及自定义集合视图
一.UICollectionView集合视图 其继承自UIScrollView. UICollectionView类是iOS6新引进的API,用于展示集合视图,布局 ...
- UIWebView和Js交互
在日常的ios项目开发中,我们经常会在原生应用中嵌入web页面,通常我们只是进行一个展示,没有其它的一些功能.但是也有一些项目中需要web页面中的html和native进行交互.但是ios sdk 并 ...
- .NET Framework 基础知识总结
C#: 1. public:同一个程序集的任何代码或引用该程序集的其他程序集都可以访问该类型或成员 internal:同一个程序集的任何代码都可以访问该类型或成员 private :只有在结构或类中的 ...
- Apple II DOS 源代码发布
加州山景城的计算机历史博物馆不仅仅展示硬件,还展示软件.博物馆此前已发布了著名软件MacPaint .Photoshop和APL的源代码,现在它公开了1978年的Apple II DOS源代码.源代码 ...