初学者无需了解这些 ,但是很多高级程序员想知道我们为什么可以保持跟踪这些依赖以及可以正确的更新到UI中。它其实很简单。跟踪算法是这样的:

  1. 无论何时你定义了一个computed observable,KO 立即执行它的执行函数来获取初始值。
  2. 当执行函数正在运行,KO会在执行函数中所有使用到的observables之间(包括其它的computed observable)建立订阅关系。这个订阅回调必定使执行函数再次运行,循环整个过程回到第一步(释放所有的订阅关系并且不再使用)。
  3. KO想所有订阅者通知你的computed observable的新值消息。

所以,KO并不只是在第一次运行执行函数的时候发现依赖关系-它会在每一次执行的时候都再发现测依赖关系。这意味着这些依赖可以动态变化:依赖A可以决定computed observable是否也依赖于B或C。然后它只会在A或者B或C变化时被重新执行一次。 你不需要声明依赖,它们在代码运行时确定。

另一个巧妙的技巧是声明式绑定作为computed observables来简单实现。这样,如果一个绑定读取一个observable的值,那个绑定就依赖于了这个observable,当它发生变化的时候就会重新激活这个绑定。(原文是The other neat trick is that declarative bindings are simply implemented as computed observables. So, if a binding reads the value of an observable, that binding becomes dependent on that observable, which causes that binding to be re-evaluated if the observable changes.这个地方我感觉翻译的有毛病。)

使用peek控制依赖

KO的自动依赖跟踪通常能准确的知道你想要什么。但是你有时可能需要控制哪些observable将要更新你的computed observable,尤其是如果这个computed observable执行一个很简短的行为例如发送一个ajax请求。. peek方法让你可以无需创建依赖就能访问一个observable或者computed observable。

在下面的例子中,computed observable使用ajax来重新为一个叫做currentPageData的observable加载数据,它向服务器传递的数据params中有两个observable属性,也就是说无论何时pageIndex属性发生了变化这个computed observable 都将会更新,也就是会运行json的请求, 但是它忽略了selectedItem的变化,因为它使用peek来进行访问. 在这种情况下,当一系列新的数据加载的时候,用户可能希望为了追踪的目的只使用selectedItem的当前值 。

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

注意: 为什么循环依赖没有意义

Computed observables 应该是将一些observable输入映射为一个单独的observable输出。这样的话在你的依赖链中形成循环是毫无意义的。 循环可能并不像递归;他们将类似于有两个电子表格单元,计算彼此的功能. 这将导致一个无限的循环。

那么如果你在你的依赖中出现了循环依赖那么ko会怎么处理呢? 它通过下面的规则来避免无限的循环::如果computed正在被执行 Knockout 将不会重新激活(执行)它。 这不会影响你的代码。在两种情况下是相关的: 当两个compute observables相互依赖,或者当一个computed observable 向另外一个拥有依赖的observable写入数据的收 (直接写或者通过一个依赖链中). 如果您需要使用这些模式之一,并希望完全避免循环依赖,您可以使用上面所述的peek功能。

总结说明,这一节算是翻完了,但是很多知识点理解上还是有问题。这一节的重点就是那个peek,它的主要作用就是:如果computed observable中使用了其它的observable,那么当那些observable有更新的时候会让这个computed observable再执行一次,如果这里面有ajax操作或其它耗时操作没有必要,那么我们使用peek可以单向解除这个依赖,当那些observable更新时使得我们computed observable无需跟着更新。

Knockoutjs官网翻译系列(四) computed中依赖追踪是如何工作的的更多相关文章

  1. Knockoutjs官网翻译系列(三) 使用Computed Observables

    书接上回,前面谈到了在视图模型中可以定义普通的observable属性以及observableArray属性实现与UI元素的双向绑定,这一节我们继续探讨第三种可实现绑定的属性类型:computed o ...

  2. Knockoutjs官网翻译系列(一)

    最近马上要开始一个新项目的研发,作为第一次mvvm应用的尝试,我决定使用knockoutjs框架.作为学习的开始就从官网的Document翻译开始吧,这样会增加印象并加入自己的思考,说是翻译也并不是纯 ...

  3. Knockoutjs官网翻译系列(二) Observable 数组

    承接前文,前文书说道了KO框架中如何使用observable的视图模型属性来与UI元素进行绑定并自动进行双向更新的事儿.observable属性除了服务基础数据类型之外,还定义了专门为服务数组类型的o ...

  4. 20.翻译系列:Code-First中的数据库迁移技术【EF 6 Code-First系列】

    原文链接:https://www.entityframeworktutorial.net/code-first/migration-in-code-first.aspx EF 6 Code-First ...

  5. 8.翻译系列: EF 6中配置领域类(EF 6 Code-First 系列)

    原文地址:http://www.entityframeworktutorial.net/code-first/configure-classes-in-code-first.aspx EF 6 Cod ...

  6. 10.翻译系列:EF 6中的Fluent API配置【EF 6 Code-First系列】

    原文链接:https://www.entityframeworktutorial.net/code-first/fluent-api-in-code-first.aspx EF 6 Code-Firs ...

  7. 【官网翻译】性能篇(四)为电池寿命做优化——使用Battery Historian分析电源使用情况

    前言 本文翻译自“为电池寿命做优化”系列文档中的其中一篇,用于介绍如何使用Battery Historian分析电源使用情况. 中国版官网原文地址为:https://developer.android ...

  8. ECharts概念学习系列之ECharts官网教程之在 webpack 中使用 ECharts(图文详解)

    不多说,直接上干货! 官网 http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94% ...

  9. 【工利其器】必会工具之(三)systrace篇(1)官网翻译

    前言 Android 开发者官网中对systrace(Android System Trace)有专门的介绍,本篇文章作为systrace系列的开头,笔者先不做任何介绍,仅仅翻译一下官网的介绍.在后续 ...

随机推荐

  1. mysql rr和rc区别

    <pre name="code" class="html">1. 数据库事务ACID特性 数据库事务的4个特性: 原子性(Atomic): 事务中的 ...

  2. (2015年郑州轻工业学院ACM校赛题) C 数列

    在我们做完B题之后就去看C题了, 发现很多人都已经做出来了, 并且一血还是我们学弟拿的, 感觉这题不难, 我们举了几个例子之后发现全是Alice 然后我们就决定意淫一下,试试看! 没想到就A了 - . ...

  3. 元素水平垂直居中(transform,margin,table-cell,jQuery)

    1.水平居中 .div{ margin:0 auto; (或者 margin:auto;) width:500px; height:300px; } 2.使用margin水平垂直居中 方式一: .di ...

  4. Delphi HTTPRIO控件怎么设置超时参数

    HTTPRIO控件怎么设置超时参数 //HTTPRIO1: THTTPRIO  设置5分钟超时 HTTPRIO1.HTTPWebNode.ConnectTimeout := 5000; Connect ...

  5. MySQL如何利用索引优化ORDER BY排序语句 【转载】

    本文转载自:http://blog.csdn.net/ryb7899/article/details/5580624  .感谢相关作者. MySQL索引通常是被用于提高WHERE条件的数据行匹配或者执 ...

  6. SRM470 - SRM474(1-250pt,500pt)(471-500pt为最短路,474-500pt未做)

    SRM 470 DIV1 250pt 题意:有n个房间排成一排,相邻两个房间之间有一扇关闭着的门(共n-1扇),每个门上都标有‘A’-‘P’的大写字母.给定一个数n,表示第n个房间.有两个人John和 ...

  7. 果酷:80后IT男“鲜果切”年入千万 _ 财经频道 _ 东方财富网(Eastmoney.com)

    果酷:80后IT男"鲜果切"年入千万 _ 财经频道 _ 东方财富网(Eastmoney.com) 果酷:80后IT男"鲜果切"年入千万

  8. shell编程(一)--常用变量及表达式

    $? 表示执行上一个命令的返回值:如果为0表示执行成功,非0表示执行失败$1.$2.... 分别表示参数1.参数2....$# 表示这个程序的参数个数$*/$@ 表示这个程序的所有参数$$ 表示这个程 ...

  9. Java多线程编程(一)

    1.Java创建多线程的方法一:(1)实现Runnable接口并实现其中的run()方法:(2)将Runable对象提交给一个Thread构造器,调用start()方法. [程序实例]单线程 publ ...

  10. jquery animate

    $(".logo").animate( { opacity: .25, //将不透明度逐渐变成.25 height: 0 //高度逐渐变成0 }, { duration: 1000 ...