你的位置:首页 > Java教程

[Java教程]Knockout 官网翻译


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,

2
3
4
5
var myViewModel = {
    personName: 'Bob',
    personAge: 123
};



你能创建一个非常简单view model 用于声明绑定.

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

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



激活Knockout

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

激活Knockout,需要添加如下的 <script> 代码块:

2
ko.applyBindings(myViewModel);



你可以把脚本块放到你的HTML文档的的底部,也可以放在顶部用jQuery的$函数加载

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

2
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对象:

2
3
4
5
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方法,例如

2
3
4
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函数,例如:

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



如果你想被通知以前被监控的值,它被改变,你可以订阅的beforechange事件:

2
3
4
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到一个监控属性中:

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