Pure computed observables

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

  • 防止内存泄漏
  • 减少计算开销

在PureComputed函数中,随着相关监控属性值变化的时候,在两种状态之间切换。

  1. 每当它没有 值变化的时候,它处于睡眠状态。当进入睡眠状态时,其配置的所有订阅它的依赖。在这种状态下,它不会订阅任何监控属性。如果当它被读取,返回的也是睡眠状态的值。

  2. 每当它 值变化的时候,它将处于监听状态。当进入监听状态,它会立即订阅所有依赖。在这种状态下,它的运作就像一个普通的计算监控属性。

语法:

Pure computed observables:

this.fullName = ko.pureComputed(function() {
return this.firstName() + " " + this.lastName();
}, this);

原始的Computed observables加上pure参数后的等同写法:

this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this, { pure: true });

使用Pure computed observables

在一个简单的向导界面的实例中,Pure computed observables仅在最后的步骤绑定到视图,所以当该步骤有效时仅更新。fullName

First name:

Last name:

Prefix:

Hello, !

Next

UI源码:

<div class="log" data-bind="text: computedLog"></div>
<!--ko if: step() == 0-->
<p>First name: <input data-bind="textInput: firstName" /></p>
<!--/ko-->
<!--ko if: step() == 1-->
<p>Last name: <input data-bind="textInput: lastName" /></p>
<!--/ko-->
<!--ko if: step() == 2-->
<div>Prefix: <select data-bind="value: prefix, options: ['Mr.', 'Ms.','Mrs.','Dr.']"></select></div>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
<!--/ko-->
<p><button type="button" data-bind="click: next">Next</button></p>

视图模型源码:

function AppData() {
this.firstName = ko.observable('John');
this.lastName = ko.observable('Burns');
this.prefix = ko.observable('Dr.');
this.computedLog = ko.observable('Log: ');
this.fullName = ko.pureComputed(function () {
var value = this.prefix() + " " + this.firstName() + " " + this.lastName();
// Normally, you should avoid writing to observables within a pure computed
// observable (avoiding side effects). But this example is meant to demonstrate
// its internal workings, and writing a log is a good way to do so.
this.computedLog(this.computedLog.peek() + value + '; ');
return value;
}, this); this.step = ko.observable(0);
this.next = function () {
this.step(this.step() === 2 ? 0 : this.step()+1);
};
};
ko.applyBindings(new AppData());

确定一个属性是不是Pure computed observables

KO提供了ko.isPureComputed函数,帮助确定监控属性是不是Pure computed observables。

var result = {};
ko.utils.objectForEach(myObject, function (name, value) {
if (!ko.isComputed(value) || ko.isPureComputed(value)) {
result[name] = value;
}
});

KnockoutJS 3.X API 第三章 计算监控属性(4)Pure computed observables的更多相关文章

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

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

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

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

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

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

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

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

  5. KnockoutJS 3.X API 第四章 数据绑定(5) 控制流component绑定

    本节目录: 一个例子 API 备注1:仅模板式的component 备注2:component虚拟绑定 备注3:传递标记到component绑定 内存管理 一个例子 First instance, w ...

  6. Knockout应用开发指南 第二章:监控属性(Observables)

    原文:Knockout应用开发指南 第二章:监控属性(Observables) 关于Knockout的3个重要概念(Observables,DependentObservables,Observabl ...

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

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

  8. 第二章:监控属性(Observables)

    关于Knockout的3个重要概念(Observables,DependentObservables,ObservableArray),本人无法准确表达它的准确含义,所以暂定翻译为(监控属性.依赖监控 ...

  9. KnockoutJS 3.X API 第六章 组件(4) 自定义元素

    自定义元素提供了一种将组件注入视图的方便方法. 本节目录 介绍 例子 传递参数 父组件和子组件之间的通信 传递监控属性的表达式 将标记传递到组件中 控制自定义元素标记名称 注册自定义元素 备注1:将自 ...

随机推荐

  1. C#中SQL Server数据库连接池使用及连接字符串部分关键字使用说明

    (1) 数据库的连接使用后,必须采用close()连接等效的方法关闭连接.只有关闭后,连接才能进入连接池. 参见微软的使用连接池说明:https://msdn.microsoft.com/zh-cn/ ...

  2. ASP.NET Core 1.0 中的依赖项管理

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  3. Win7 64下Visual C++ 6.0不兼容

    Win7 64下Visual C++ 6.0不兼容 安装VSE6.0: 1.运行setup.exe安装程序,会弹出如下的的 程序兼容性助手 提示框,这个是Win7在警告用户vc6存在兼容性问题:此程序 ...

  4. DB_oracle学习笔记_概念分析

    概念分析: 1.       数据库(Database): 数据库是一个文件集合,包括数据文件,临时文件,重做日志文件和控制文件.也可以说数据库是物理操作系统文件或磁盘集合.数据库可以由多个实例(sc ...

  5. 排列组合算法(PHP)

    用php实现的排列组合算法.使用递归算法,效率低,胜在简单易懂.可对付元素不多的情况. //从$input数组中取$m个数的组合算法 function comb($input, $m) { if($m ...

  6. vmware下的linux的host only上网配置

    1.虚拟机 的网络适配器类型,选择Host-only.启动时修改网络适配器类型需要关电源重启. 2.本机电脑设置,网络邻居 启用 VMware Virtual Ethernet Adapter for ...

  7. 03人人都应该了解的10个 jQuery 小技巧

    1  返回顶部按钮 你可以利用animate和scrollTop来实现返回顶部的动画,而不需要使用其他插件. // Back to top $('a.top').click(function () { ...

  8. 开源库Magicodes.ECharts使用教程

    目录 1    概要    2 2    Magicodes.ECharts工作原理    3 2.1    架构说明    3 2.1.1    Axis    4 2.1.2    CommonD ...

  9. How and Where Concurrent Asynchronous I/O with ASP.NET Web API 对异步编程分析的非常的好

    How and Where Concurrent Asynchronous I/O with ASP.NET Web API http://www.tugberkugurlu.com/archive/ ...

  10. Yii2中的环境配置

    默认的Debug配置 在入口文件中 defined ( 'YII_DEBUG' ) or define ( 'YII_DEBUG', true ); defined ( 'YII_ENV' ) or ...