初学knockoutjs记录2-Observables监控属性

标签：

1、创建带有监控属性的view model

　　knockout建有3个核心特性：

　　　　Observables监控属性和dependency tracking依赖跟踪

　　　　Declarative bindings 生命式绑定

　　　　Templating 模板

　　MVVM and View Models

　　　　Model-View-View Model(MVVM) 是为了解决用户交互构建的设计模式，它通常被描述为如何将复杂的UI交互简单的分为三个部分：

　　　　A Model: 应用程序的stored data存储数据模型，包含业务领域的对象和操作，并且是独立于UI的，当使用KO时，通常会使用Ajax调用服务端代码去读写这个存储数据模型。

　　　　A view model: 纯code表达的UI上的数据和操作，例如你实现一个列表编辑，你的view model通常是一个包含列表项的对象，以及公开出来的添加或移除列表项的方法；注意这个并不是UI本身，它并不包含任何按钮或者显示样式的东西，它也不是持久数据模型，它拥有的是用户使用着的不保存的数据，当使用KO时，你的view model是不包含HTML相关概念的纯javascript对象，保持view model的抽象可以使其保持简单，以便你能够管理更复杂的行为而不至于迷失。

　　　　A view: 可见的，交互式的呈现view model状态的UI,它呈现view model的信息，发送命令道view model,并且在view model有任何变化时更新它的状态，当使用KO时，你的view无非就是以声明式绑定方式绑定到view model的HTML文档，或者，你也可以使用模板基于你view model中的数据生成HTML。

　　使用KO创建view model的方式如下，就像生命任何javascript对象一样

var helloViewModel = {
        firstName: "Yao",
        lastName: "Ming"
    };

　　　　接下来可以使用声明式绑定方式为这个view model创建一个非常简单的view，例如创建一个显示firstName的标签

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

　　Activating knockout

　　　　data-bind尽管很棒但是它并不是HTML原生属性（它严格遵从HTML5语法，尽管HTML4的验证器会提示有不可识别的属性但是使用它并不会有问题），但是因为浏览器并不认识它，所以需要激活knockout以便使其生效。

　　　　激活knockout使用如下的代码块

ko.applyBindings(helloViewModel);

　　　　你可以将这个script代码块放在HTML文档的底部，也可以将其放在页面上边并且同时将其包含在ready处理函数中，比如jQuery的$函数中。现在你的view将如同写了如下的HTML代码一样的呈现出来

The first name is <span>Yao</span>

初学knockoutjs记录2-Observables监控属性

标签：

原文地址：http://www.cnblogs.com/petunsecn/p/4886773.html