Knockout 新版应用开发教程之建立view models与监控属性

• 最近抽出点时间研究MVVM，包括司徒正美的avalon，google的angular，以及Knockout，博客园Tom的Knockout指南 时隔2年了，ko更新了很多，因此文档也相应的变化了，因此本人从学习的角度就翻译下官方的新的教程文章。
• avalon就是从KO演变过来的，不过加入ng,emberjs等框架的特点，加入许多巧妙的设计，算是很短小精悍的框架了，你们有兴趣能够对比下。

Knockout是构建在3个核心的特性上的：

1. 监控属性（Observables）和依赖跟踪（Dependency tracking）
2. 声明式绑定（Declarative bindings）
3. 模版（Declarative bindings）

这一节，你讲学到3个核心特性中的第一个。 在这以前， 咱们来解释一下MVVM模式和view model的概念。

MVVM and View Models 概念

模型-视图-视图模型（MVVM）是一种设计模式用来构建用户界面，它描述了如何让一个复杂的UI界面分解成3个部分：

• 模型：你应用存储的数据.数据包括对象和业务操做（例如：银子帐户能够完成转帐功能）而且独立于任何的UI,使用KO的时候，一般说是向服务器调用Ajax读写这个存储的模型数据。
• 视图模型：在UI上，纯code描述的数据以及操做。例如，若是你实现列表编辑，你的view model应该是一个包含列表项items的对象和暴露的add/remove列表项（item）的操做方法。

注意这不是UI自己：它不包含任何按钮的概念或者显示风格。它也不是持续数据模型 – 包含用户正在使用的未保存数据。使用KO的时候，你的view models是不包含任何HTML知识的纯JavaScript 对象。保持view model抽象能够保持简单，以便你能管理更复杂的行为。

• 视图：一个可见的，交互式的，表示view model状态的UI。 从view model显示数据，发送命令到view model（例如：当用户click按钮的时候） ，任何view model状态改变的时候更新

使用KO的时候，你的view就是你带有绑定信息的HTML文档，这些声明式的绑定管理到你的view model上。或者你可使用模板从你的view model获取数据生成HTML。

 

例如：建立一个KO的view model，只须要声明任意的JavaScript object，

var myViewModel = {
    personName: 'Bob',
    personAge: 123
};

你能建立一个很是简单view model 用于声明绑定.

例如: 下面的代码显示personName 值

The name is <span data-bind="text: personName"></span>

激活Knockout

• data-bind 属性不是HTML自己持有的，尽管它很好使用（它严格听从HTML5语法， 虽然HTML4验证器提示有不可识别的属性但依然可用），但游览器自己是不知道它是什么意思的，你须要激活Knockout让这个属性生效

激活Knockout，须要添加以下的 <script> 代码块：

ko.applyBindings(myViewModel);

你能够把脚本块放到你的HTML文档的的底部，也能够放在顶部用jQuery的$函数加载

就这样了!如今,如过你写了下HTML代码你的的视图将显示：

The name is <span>Bob</span>

你可能比较疑惑，ko.applyBindings使用了什么参数？

• 第一个参数就是view model模型对象，你想要用来激活声明绑定
• 可选参数，你能经过第二个参数来定义上下文，也就是说能够在指定的文档范围内查找 data-bind属性
• 例如：
• ko.applyBindings(myViewModel, document.getElementById('someElementId'))
• 它的如今是只有做为someElementId 的元素和子元素才能激活KO功能。 好处是你能够在同一个页面声明多个view model，用来区分区域。

真的，很简单

Observables 监控属性

好了，你已经看到了如何建立一个基本的view model 而且怎么去显示的去绑定它的属性。

可是KO有一个核心的功能，当你的view model发生改变的时候它会自动更新你的UI。

当你的view model发现改变时怎么才能让KO知道呢？

回答：你须要把模型的属性声明称监控属性，由于它是很是特殊的javascript对象，可以通知在改变的时候通知订阅者，而且可以自动侦测依赖。

例如：改写之前一个view model对象：

var myViewModel = {
    personName: ko.observable('Bob'),
    personAge: ko.observable(123)
};

你没必要改变全部的视图 - 这些 data-bind 的语法继续保持工做。不一样的地方是它可以检测到改变，而且当使用的时候，它将会自动更新view.

Reading and writing observables 监控属性的读和写

不是全部的游览器都支持JavaScript getters 和 setter(* cough * IE * cough *),因此为了兼容，ko.observable 对象实际上一个 functions.

• 读监控属性当前的值，直接调用不须要参数。
• 例如：
• myViewModel.personName() will return 'Bob', and myViewModel.personAge() will return 123.
• 写一个新的值到监控属性，调用监控属性而且传入一个新的值做为一个参数。
• 例如：
• myViewModel.personName('Mary') 将把值变成'Mary'。
• 在一个model对象中写一个值到多个监控属性，你将能用到链式 语法。
• 例如：
• myViewModel.personName('Mary').personAge(50)
• 将把name的值变'Mary'而且age的值变成50.

1. observables的意义就是可以被监控(observed)，i.e, 其余代码能够这样说,它想要更改的通知。因此KO内部有不少内置的绑定语法。因此，当你写data-bind="text: personName"，
2. 这个text会注册绑定它本身被通知改变，当personName的值改变，它就能获得通知（假设这是一个能够observable的值）。
3. 当你用myViewModel.personName('Mary')改变这个name值是value = ’Mary’时，text绑定将自动更新这个新值到相应的DOM元素上，这就是如何改变视图模型自动传播到视图的。

Explicitly subscribing to observables 显式订阅监控属性

一般来讲若是你不须要手动的去设置订阅，那么你能够跳过这一节。

对于高级用户，假如你想注册本身的订阅通知的变化来观察，你可以调用它的subscribe方法，例如

myViewModel.personName.subscribe(function(newValue) {
    alert("The person's new name is " + newValue);
});

subscribe 方法在KO内部许多地方都被使用。大部分时间你都不须要用它，由于它是内置绑定而且是由模版系统管理订阅。

subscribe 有三个参数：

1. callback 回调函数，当发生的通知调用
2. target（可选）定义在回调函数中的this
3. event（可选默change—）接收通知的事件的名称

你也能够终止本身的订阅：首先获得你的订阅，而后调用这个对象的dispose函数，例如：

var subscription = myViewModel.personName.subscribe(function(newValue) { /* do stuff */ });
// ...then later...
subscription.dispose(); // I no longer want notifications

若是你想被通知之前被监控的值，它被改变，你能够订阅的beforechange事件：

myViewModel.personName.subscribe(function(oldValue) {
    alert("The person's previous name is " + oldValue);
}, null, "beforeChange");

Forcing observables to always notify subscribers

当写一个了监控属性，它包含一个原始值时，若是dependencies依赖的observable正常状况下只会有value发生改变才会通知。然而，可使用内置的通知extender确保observable’s的订阅在写的时候老是会发出通知，即便值是相同的。你会运用extender到一个监控属性中：

myViewModel.personName.extend({ notify: 'always' });

 

本章完。