knockoutJS学习指南

待我称王封你为后i 2022-07-28 04:11 209阅读 0赞

Knockout是一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化。

Knockout是在下面三个核心功能是建立起来的：

1.  监控属性（Observables）和依赖跟踪（Dependency tracking）
2.  声明式绑定（Declarative bindings）
3.  模板（Templating）

**MVVM and View Models**

Model-View-View Model (MVVM) 是一种创建用户界面的设计模式。 描述的是如何将复杂的UI用户界面分成3个部分：

*   **model**: 你程序里存储的数据。这个数据包括对象和业务操作（例如：银子账户可以完成转账功能）， 并且独立于任何UI。使用KO的时候，通常说是向服务器调用Ajax读写这个存储的模型数据。
 *   **view model**: 在UI上，纯code描述的数据以及操作。例如，如果你实现列表编辑，你的view model应该是一个包含列表项items的对象和暴露的add/remove列表项（item）的操作方法。

注意这不是UI本身：它不包含任何按钮的概念或者显示风格。它也不是持续数据模型 – 包含用户正在使用的未保存数据。使用KO的时候，你的view models是不包含任何HTML知识的纯JavaScript 对象。保持view model抽象可以保持简单，以便你能管理更复杂的行为。

*   **view**: 一个可见的，交互式的，表示view model状态的UI。 从view model显示数据，发送命令到view model（例如：当用户click按钮的时候） ，任何view model状态改变的时候更新。

使用KO的时候，你的view就是你带有绑定信息的HTML文档，这些声明式的绑定管理到你的view model上。或者你可以使用模板从你的view model获取数据生成HTML。

创建一个view model，只需要声明任意的JavaScript object。例如：

var myViewModel = {
        personName: 'Bob',
        personAge: 123
    };

你可以为view model创建一个声明式绑定的简单view。例如：下面的代码显示personName 值：

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

**Activating Knockout**

data-bind属性尽快好用但它不是HTML的原生属性（它严格遵从HTML5语法， 虽然HTML4验证器提示有不可识别的属性但依然可用）。由于浏览器不识别它是什么意思，所以你需要激活Knockout 来让他起作用。

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

ko.applyBindings(myViewModel);

你可以将这个代码块放在HTML底部，或者放在jQuery的$函数或者ready 函数里，然后放在页面上面, 最终生成结果就是如下的HTML代码：