• 最近抽出点时间研究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' });

本章完。

Knockout 新版应用开发教程之创建view models与监控属性的更多相关文章

  1. Knockout 新版应用开发教程之Computed Observables

    Computed Observables 如果你有监控属性firstName和lastName的话,此时如果你想要显示全名? 这个时候computed(以前叫做依赖)监控属性就出马了,这是一个函数用来 ...

  2. iOS 9应用开发教程之创建iOS 9项目与模拟器介绍

    iOS 9应用开发教程之创建iOS 9项目与模拟器介绍 编写第一个iOS 9应用 本节将以一个iOS 9应用程序为例,为开发者讲解如何使用Xcode 7.0去创建项目,以及iOS模拟器的一些功能.编辑 ...

  3. Knockout 新版应用开发教程之"text"绑定

    目的 DOM元素显示文本的值是你传递的参数,前提是text先绑定到该元素上 典型的常用元素 <span>或者<em>习惯性的用来显示文本,但是在技术上来说你可以用任何元素的. ...

  4. XAF应用开发教程(一) 创建项目

    XAF是DevExpress公司的快速开发框架,全称eXpress Application Framework,是企业信息系统的开发利器,快速开发效果显著,在.net框架中,笔者至今没有找到一款可以与 ...

  5. Knockout 新版应用开发教程之Observable Arrays

    假如你想到侦测和相应一个对象的改变,假如你想要侦测和响应一一组合集的改变,就要用observableArray 在许多场景都是很有用的,比如你要在UI上需要显示/编辑的一个列表数据集合,然后对集合进行 ...

  6. Knockout 新版应用开发教程之"visible"绑定

    "visible" 绑定 用途 DOM元素的显示或者隐藏是根据绑定的值来的,前提是将visible绑定给该元素 例子 <div data-bind="visible ...

  7. Knockout 新版应用开发教程之Observable与computed

    KO是什么? KO不是万能的,它的出现主要是为了方便的解决下面的问题: UI元素较多,用户交互比较频繁,需要编写大量的手工代码维护UI元素的状态.样式等属性? UI元素之间关系比较紧密,比如操作一个元 ...

  8. XAF应用开发教程(二)业务对象模型之简单类型属性

    使用过ORM的朋友对这一部分理解起来会非常快,如果没有请自行补习吧:D. 不说废话,首先,我们来开发一个简单的CRM系统,CRM系统第一个信息当然是客户信息.我们只做个简单 的客户信息来了解一下XAF ...

  9. Knockout开发中文API系列2–创建数据模型和监控属性

    Observables,这个词的翻译来自汤姆大叔,对于部分翻译不是很准确的,欢迎大家留言,以得到更好的翻译. Knockout是建立在以下3个核心功能之上的: 1.    属性监控与依赖跟踪 2.   ...

随机推荐

  1. Postgres-enum

    -- 1. rename the enum type you want to change alter type some_enum_type rename to _some_enum_type; - ...

  2. 微信蓝牙BLE接入调试指引 硬件篇

    1 平台框架简介 微信蓝牙BLE由三个模块组成,分别是蓝牙设备.微信和第三方服务器,如下图: 蓝牙设备与微信之间的通信是通过蓝牙GATT协议进行. 微信与第三方服器之间的通信是通过网络http 接口进 ...

  3. win7 iis7 发布asp.net mvc4.0+EF6.0站点记录

    1.处理程序“ExtensionlessUrlHandler-Integrated-4.0”在其模块列表中有一个错误模块“ManagedPipelineHandler” 解决方法: 原因: 1.iis ...

  4. DHCP中继

    DHCP中继 要求: 假设公司现在有两个部门分别为 销售部门,生产部门 对这两个部门分配不同网段, 销售部门 192.168.1.0/24 生产部门 192.168.2.0/24 为了节约使用LINU ...

  5. iOS应用架构谈 网络层设计方案

    网络层在一个App中也是一个不可缺少的部分,工程师们在网络层能够发挥的空间也比较大.另外,苹果对网络请求部分已经做了很好的封装,业界的AFNetworking也被广泛使用.其它的ASIHttpRequ ...

  6. Microsoft ACE OLEDB 12.0概念及用法

    首先需要清楚几个概念: Database engine(数据引擎):一些预先存储于数据库中的组件: Microsoft JET (Joint Engine Technology):Microsoft ...

  7. open falcon dashboard 安装

    open falcon dashboard 安装 yum -y install lrzsz python-virtualenv mysql-devel python-devel libffi-deve ...

  8. kafka 生产者java编码

    public class KafkaProducerDemo { public static void main(String[] args) throws InterruptedException ...

  9. file_get_contents抓取远程URL内容

    /** * POST URL * @param $url * @param null $post * @return false / string */ public static function ...

  10. word转html方法

    在网上看了一篇关于word转html的文章,感觉不错,和大家分享一下. /// <summary> /// word转成html /// </summary> /// < ...