KO是如何实现自动更新的

初学者可以掠过该篇,如果你是一个刨根问底的开发者,那本节将告诉你KO是如何实现依赖追踪和UI自动更新的。

其实很简单,KO的依赖追踪算法如下:

  1. 当你声明一个计算监控属性,KO立即调用其相关的函数来获取其初始值。
  2. 当相关函数正在运行,KO将建立一个订阅到相关监控属性(包括其他计算监控属性)并读取他们的值。订阅回调函数设置为订阅函数再次运行,循环的这个过程。
  3. 当有新的值,KO会通知你的计算监控属性将值反馈给用户。

采用PEEK控制依赖

Knockout的自动依赖跟踪通常不是你想要的,但是你有时可能需要控制那些会更新依赖属性值的监控属性,特别是依赖属性会执行某些操作时,比如一个Ajax请求。peek方法可以帮助你在不需要创建依赖的情况下去控制一个监控属性或者依赖属性。

在下面的例子中,依赖属性通过Ajax方法和其他两个监控属性参数来重新加载一个名为currentPageData的监控属性。当pageIndex发生变化时,依赖属性会被更新,但会忽略掉selectedItem的变化,因为它是通过peek方法控制。在这种情况下,用户可能希望仅仅在数据被加载时才使用selectedItem的当前值用于追踪。

ko.computed(function() {
var params = {
page: this.pageIndex(),
selected: this.selectedItem.peek()
};
$.getJSON('/Some/Json/Service', params, this.currentPageData);
}, this);

如上面的例子,如果你想做SPA的话,这种方式很有用哦~。如果你想阻止一些过于频繁的监控属性更新,可以参考第二章第一节的延缓或抑制更改通知

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

  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 第三章 计算监控属性(2) 可赋值的计算监控属性

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

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

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

  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. 第二章:监控属性(Observables)

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

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

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

  9. KnockoutJS 3.X API 第六章 组件(3) 组件绑定

    组件绑定将指定的组件注入到元素中,并且可选地将参数传递给它. 本节目录 一个例子 API 组件生命周期 备注1:仅限模板组件 备注2:使用没有容器元素的组件 备注3:将标记传递给组件 处置和内存管理 ...

随机推荐

  1. 推荐一款跨平台的 Azure Storage Explorer

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

  2. multiple definition of `err_sys' 《UNIX环境高级编程》

    本文地址:http://www.cnblogs.com/yhLinux/p/4079930.html 问题描述: [点击此处直接看解决方案] 在练习<UNIX环境高级编程>APUE程序清单 ...

  3. 浅析JVM内存结构和6大区域(转)举例非常好

    内存作为系统中重要的资源,对于系统稳定运行和高效运行起到了关键的作用,Java和C之类的语言不同,不需要开发人员来分配内存和回收内存,而是由JVM来管理对象内存的分配以及对象内存的回收(又称为垃圾回收 ...

  4. C程序员学bash shell容易掉坑的注意点(未完待续)

    shell解释器很娇气,有一点点不合乎规范的编码风格都会让脚本歇菜. 1. 空格该有还是该没有要看情况.该有的时候不能没有!该没有的时候不能有! 变量赋值的等号两边不能有空格. 2. 在shell中是 ...

  5. 关于mock server

    这篇技术博客是在知乎上看到的 知乎js大神张云龙写的 这里贴过来记录下,如果侵权 请告知将及时删除. --------------------------- 为了更好的分工合作,让前端能在不依赖后端环 ...

  6. player.swf播放flv方式

    <embed src="../images/player.swf" allowFullScreen="true" quality="high&q ...

  7. ubuntu安装octave的小坑

    出现了以下情况: After this operation, 163 MB of additional disk space will be used.Do you want to continue? ...

  8. 练习ajax的时候出现这个问题 还没解决

    VM601:1 Uncaught SyntaxError: Unexpected end of JSON input  应该怎么办呢

  9. (转C#中Enum用法小结)

    enums枚举是值类型,数据直接存储在栈中,而不是使用引用和真实数据的隔离方式来存储. (1)默认情况下,枚举中的第一个变量被赋值为0,其他的变量的值按定义的顺序来递增(0,12,3...),因此以下 ...

  10. 在线教学、视频会议 Webus Fox(1)文本、语音、视频聊天及电子白板基本用法

    Webus Fox是基于网页的在线教学.视频会议软件,不用安装,直接使用.它提供文本.语音.视频聊天,文件共享.电子白板等功能. 1. 登录 访问 http://flash.webus.cn/#,用自 ...