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 

激活Knockout

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

激活Knockout,需要添加如下的

你可能感兴趣的:(Knockout 新版应用开发教程之创建view models与监控属性)