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' });

Knockout 官网翻译的更多相关文章

  1. Knockout官网实例在MVC下的实现-02,实现计次

    本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里. 当次数达到3: View视图 页面包含三个部分:1.显示点击按钮的次数2.button按钮 ...

  2. Knockout官网实例在MVC下的实现-01,实现Hello world

    本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里. View视图 Knockout的一个特点是:声明式绑定,即Declarative bind ...

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

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

  4. 卸载 Cloudera Manager 5.1.x.和 相关软件【官网翻译】

    问题导读: 1.不同的安装方式,卸载方法存在什么区别?2.不同的操作系统,卸载 Cloudera Manager Server and 数据库有什么区别? 重新安装不完整如果你来到这里,因为你的安装没 ...

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

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

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

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

  7. Knockout 官网学习文档目录

    官网:https://knockoutjs.com/documentation/introduction.html Knockout-Validation: https://github.com/Kn ...

  8. android測试工具MonkeyRunner--google官网翻译

    近期在复习之前的笔记,在回想MonkeyRunner时看了看google官网的内容,写得不错.就翻译出来分享下.事实上google官网真是一个学习的好地方. 基础知识 MonkeyRunner工具提供 ...

  9. Knockoutjs官网翻译系列(四) computed中依赖追踪是如何工作的

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

随机推荐

  1. SQLServer中系统存储过程sp_spaceused

    sp_spaceused 执行sp_spaceused存储过程的时候可以不用带参数,直接执行,或者exec sp_spaceused都可以,返回两个结果集: 列名 数据类型 描述 database_n ...

  2. 3.MongoDB下Windows下的安装

    由于博主目前使用的是Windows的系统,没有使用Linux等其它的系统,因此此安装配置和开发使用,均是在Windows下进行的,以后在使用其它的系统的时候,再将其它系统的配置的使用补充上来. 1.下 ...

  3. js执行环境的深入理解

    第一个例子中 :之所以每个函数都返回不同的值的原因 有2点 (简写如下文) 就是[SCOPE]内部属性,函数可能拥有相同的父作用域时,多个函数引用同一个[SCOPE]属性,所以return i的值还是 ...

  4. mac下使用gcc

    1.下载安装macports:http://www.macports.org/install.php 安装完成之后,打开终端 2.在终端中输入 port install gcc_select 3.使用 ...

  5. Python字符串格式化

    一.使用格式化符来格式化字符串: Python支持的所有格式化符 格式化符 意义 'd' 返回要格式化对象的十进制表示,如果可以 'i' 返回要格式化对象的十进制表示,如果可以 'o' 返回要格式化对 ...

  6. 移动设备如何打开RMS加密的文档

    关键字:RMS. AZure RMS.IPhone.Android.Office365.Sharepoint.Exchange 最近总是碰到要求用苹果手机及安卓手机阅读RMS加密文档的需求,经过查找相 ...

  7. Qt之添加QLabel的点击事件

    QLabel功能为显示了一个字符串或者图片等信息,它本身没有click信号.也就不能够响应click点击事件,有什么办法来实现来,我们可以子类化QLabel,实现MouseXXXEvent.class ...

  8. delphi 图像旋转

    网络搜集的 觉得有用的拿去吧  速度不错呢 //旋转90° procedure Rotate(Bitmap: TBitmap); type THelpRGB = packed record rgb: ...

  9. python之编写购物车(第二天)

    作业: 编写购物车 具体实现了如下功能: 1.可购买的商品信息显示 2.显示购物车内的商品信息.数量.总金额 3.购物车内的商品数量进行增加.减少和商品的删除 4.用户余额的充值 5.用户购买完成进行 ...

  10. Linux_用户级_常用命令(2):cd

    开篇语:懒是人类进步的源动力 本文原创,专为光荣之路公众号所有,欢迎转发,但转发请务必写出处! Linux常用命令第二集包含命令:cd 一.格式: cd directory 使用cd命令在目录层次间移 ...