第二讲：监控属性(Observables).pdf

第⼆章：监控属性(Observables) 1 创建带有监控属性的view model Observables Knockout是在下⾯三个核⼼功能是建⽴起来的： 1. 监控属性 （Observables ）和依赖跟踪 （Dependency tracking ） 2. 声明式绑 （Declarative bindings ） 3. 模板 （Templating ） 这⼀节，你讲学到3个功能中的第⼀个。 在这之前， 我们来解释⼀下MVVM模式和 view model的概念。 MVVM and View Models Model View View Model (MVVM) 是⼀种创建⽤户界⾯的设计模式。 描述的是如何将 复杂的UI⽤户界⾯分成3个部分： model: 你程序⾥存储的数据。这个数据包括对象和业务操作 （例如：银⼦账户 可以完成转账功能）， 并且独⽴于任何UI 。使⽤KO的时候，通常说是向服务 器调⽤Aj ax读写这个存储的模型数据。 view model: 在UI上，纯code描述的数据以及操作。例如，如果你实现列表编 辑，你的view model应该是⼀个包含列表项items的对象和暴露的add/remove列 表项 （item ）的操作⽅法。 　　　　注意这不是UI本⾝：它不包含任何按钮的概念或者显⽰风格。它也不是持续 数据模型 – 包含⽤户正在使⽤的未保存数据。使⽤KO的时候，你的view models是不 包含任何HTML知识的纯JavaScript 对象。保持view model抽象可以保持简单，以便你 能管理更复杂的⾏为。 view: ⼀个可见的，交互式的，表⽰view model状态的UI 。 从view model显⽰数 据，发送命令到view model （例如：当⽤户click按钮的时候） ，任何view model状态改变的时候更新。 使⽤KO的时候，你的view就是你带有绑 信息的HTML⽂档，这些声明式的绑 管理 到你的view model上。或者你可以使⽤模板从你的view model获取数据⽣成HTML 。 创建⼀个view model ，只需要声明任意的JavaScript object 。例如： var myViewModel = { personName: Bob, personAge: 123 } 你可以为view model创建⼀个声明式绑 的简单view 。例如：下⾯的代码显⽰ personName 值： The name is span data-bind=text: personName/span Activating Knockout data bind属性尽快好⽤但它不是HTML 的原⽣属性 （它严格遵从HTML5语法， 虽然 HTML4验证器提⽰有不可识别的属性但依然可⽤）。由于浏览器不识别它是什么意 思，所以你需要激活Knockout 来让他起作⽤。 激活Knockout ，需要添加如下的 代码块： ko.applyBindings(myViewModel) 你可以将这个代码块放在HTML底部，或者放在j Query的$函数或者ready 函数⾥，然 后放在页⾯上⾯, 最终⽣成结果就是如下的HTML代码： The name is spanBob/span 你可能奇怪ko .applyBindings使⽤的是什么样的参数, 第⼀个参数是你想⽤于声明式绑 第⼆个参数 （可选），可以声明成使⽤data bind的HTML元素或者容器。例 如， ko .applyBindings(myViewModel , document .getElementById(someElementId)) 。它的现在是只有作为 someElementId 的元素和⼦元素才能激活KO功能。 好处是你可以在同⼀个页⾯ 声明多个view model ，⽤来区分区域。 Observables 现在已经知道如何创建⼀个简单的view model并且通过binding显⽰它的属性了。但是 KO⼀个重要的功能是当你的view model改变的时候能⾃动更新你的界⾯。当你的view model部分改变的时候KO是如何知道的呢？答案是：你需要将你的model属性声明成 observable的,