Knockout简介

1 Knockout简介 (Introduction)

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

Knockout有以下4大重要概念：

• 声明式绑定(Declarative Bindings)：使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。

• UI界面自动刷新(Automatic UI Refresh)：当您的模型状态(model state)改变时，您的UI界面将自动更新。

• 依赖跟踪(Dependency Tracking)：为转变和联合数据，在你的模型数据之间隐式创建关系。

• 模板(Templating)：为您的模型数据快速编写复杂的可嵌套的UI。

简称：KO

官方网站：http://knockoutjs.com

2 入门介绍 (Getting started)

2.1 KO工做原理及带来的好处

Knockout 是一个以数据模型（data model）为基础的可以帮助你建立富文本，响应显示和编辑用户界面的JavaScript类库。任什么时候候若是你的UI须要自动更新（好比：更新依赖于用 户的行为或者外部数据源的改变），KO可以很简单的帮你实现而且很容易维护。

重要特性:

• 优雅的依赖追踪- 无论任什么时候候你的数据模型更新，都会自动更新相应的内容。

• 声明式绑定- 浅显易懂的方式将你的用户界面指定部分关联到你的数据模型上。

• 灵活全面的模板- 使用嵌套模板能够构建复杂的动态界面。

• 轻易可扩展- 几行代码就能够实现自定义行为做为新的声明式绑定。

额外的好处：

• 纯JavaScript类库– 兼容任何服务器端和客户端技术

• 可添加到Web程序最上部 – 不须要大的架构改变

• 简洁的 – Gzip以前大约25kb

• 兼容任何主流浏览器 (IE 6+、Firefox 2+、Chrome、Safari、其它)

• Comprehensive suite of specifications（采用行为驱动开发） - 意味着在新的浏览器和平台上能够很容易经过验证。

开发人员若是用过Silverlight或者WPF可能会知道KO是MVVM模式的一个例子。若是熟悉 Ruby on Rails 或其它MVC技术可能会发现它是一个带有声明式语法的MVC实时form。换句话说，你能够把KO当成经过编辑JSON数据来制做UI用户界面的一种方 式… 无论它为你作什么

OK,如何使用它？

简单来讲：声明你的数据做为一个JavaScript 模型对象（model object），而后将DOM 元素或者模板（templates）绑定到它上面.

让咱们来看一个例子

想一想在一个页面上，航空旅客能够为他们的旅行升级高级食物套餐，当他们选择一个套餐的时候，页面当即显示套餐的描述和价格。首先，声明可用的套餐:

var availableMeals = [
    { mealName: 'Standard', description: 'Dry crusts of bread', extraCost: 0 },
    { mealName: 'Premium', description: 'Fresh bread with cheese', extraCost: 9.95 },
    { mealName: 'Deluxe', description: 'Caviar and vintage Dr Pepper', extraCost: 18.50 }
  ];

若是想让这3个选项显示到页面上，咱们能够绑定一个下拉菜单（例如：<select>元素）到这个数据上。例如：

<h3>Meal upgrades</h3>
<p>Make your flight more bearable by selecting a meal to match your social and economic status.</p>
Chosen meal: <select data-bind="options: availableMeals,
                                optionsText: 'mealName'"></select>

启用Knockout并使你的绑定生效，在availableMeals变量声明以后添加以下代码：

var viewModel = {
    /* we'll populate this in a moment */
};

ko.applyBindings(viewModel); // Makes Knockout get to work
// 注意：ko. applyBindings须要在上述HTML以后应用才有效

你能够在这个系列里将学习更多的view model 和 MVVM。如今你的页面将render成以下的样子：

响应选择

下一步，声明一个简单的data model来描述旅客已经选择的套餐，添加一个属性到当前的view model上：

var viewModel = {
    chosenMeal: ko.observable(availableMeals[0])
};

ko.observable是什么？它是KO里的一个基础概念。UI能够监控（observe）它的值而且回应它的变化。这里咱们设置 chosenMeal是UI能够监控已经选择的套餐，并初始化它，使用availableMeal里的第一个值做为它的默认值（例 如：Standard）。

让咱们将chosenMeal 关联到下拉菜单上，仅仅是更新<select>的data-bind属性，告诉它让<select>元素的值读取/写入chosenMeal这个模型属性：

Chosen meal: <select data-bind="options: availableMeals,
                                optionsText: 'mealName',
                                value: chosenMeal"></select>

理论上说，咱们如今能够读/写chosenMeal 属性了，可是咱们不知道它的做用。让咱们来显示已选择套餐的描述和价格：

<p>
    You've chosen:
    <b data-bind="text: chosenMeal().description"></b>
    (price: <span data-bind='text: chosenMeal().extraCost'></span>)
</p>

因而，套餐信息和价格，将根据用户选择不一样的套餐项而自动更新：

更多关于observables和dependency tracking的使用

最后一件事：若是能将价格格式化成带有货币符号的就行了，声明一个JavaScript函数就能够实现了…

function formatPrice(price) {
    return price == 0 ? "Free" : "$" + price.toFixed(2);
}

(price: <span data-bind='text: formatPrice(chosenMeal().extraCost)'></span>)

界面显示结果将变得好看多了：

Price的格式化展现了，你能够在你的绑定里写任何JavaScript代码，KO仍然能探测到你的绑定依赖代码。这就展现了当你的model改变时，KO如何只进行局部更新而不用从新render整个页面 – 仅仅是有依赖值改变的那部分。

链式的observables也是支持的（例如：总价依赖于价格和数量）。当链改变的时候，依赖的下游部分将会从新执行，同时全部相关的UI将自动更新。不须要在各个observables之间声明关联关系，KO框架会在运行时自动执行的。

你能够从 observables 和 observable arrays 获取更多信息。上面的例子很是简单，没有覆盖不少KO的功能。你能够获取更多的内嵌的绑定和模板绑定。

KO和jQuery (或Prototype等)是竞争关系仍是能一块儿使用？

全部人都喜欢jQuery! 它是一个在页面里操做元素和事件的框架，很是出色而且易使用，在DOM操做上确定使用jQuery，KO解决不一样的问题。

如 果页面要求复杂，仅仅使用jQuery须要花费更多的代码。 例如：一个表格里显示一个列表，而后统计列表的数量，Add按钮在数据行TR小于5调的时候启用，不然就禁用。jQuery 没有基本的数据模型的概念，因此须要获取数据的数量（从table/div或者专门定义的CSS class），若是须要在某些SPAN里显示数据的数量，当添加新数据的时候，你还要记得更新这个SPAN的text。固然，你还要判断当总 数>=5条的时候禁用Add按钮。 而后，若是还要实现Delete功能的时候，你不得不指出哪个DOM元素被点击之后须要改变。

Knockout的实现有何不一样？

使 用KO很是简单。将你的数据描绘成一个JavaScript数组对象myItems，而后使用模板（template）转化这个数组到表格里（或者一组 DIV）。无论何时数组改变， UI界面也会响应改变（不用指出如何插入新行<tr>或在哪里插入），剩余的工做就是同步了。例如：你能够声明绑定以下一个SPAN显示数据 数量（能够放在页面的任何地方，不必定非要在template里）：

There are <span data-bind="text: myItems().count"></span> items

就是这些！你不须要写代码去更新它，它的更新依赖于数组myItems的改变。一样， Add按钮的启用和禁用依赖于数组myItems的长度，以下：

<button data-bind="enable: myItems().count < 5">Add</button>

以后，若是你要实现Delete功能，没必要指出如何操做UI元素，只须要修改数据模型就能够了。

总结：KO没有和jQuery或相似的DOM 操做API对抗竞争。KO提供了一个关联数据模型和用户界面的高级功能。KO自己不依赖jQuery，可是你能够一块儿同时使用jQuery， 生动平缓的UI改变须要真正使用jQuery。

2.2 下载安装

Knockout的核心类库是纯JavaScript代码，不依赖任何第三方的类库。因此按照以下步骤便可添加KO到你的项目里：

1. 下载Knockout类库的最新版本，在正式开发和产品使用中，请使用默认的压缩版本（knockout-x.x.js）。 下载地址：https://github.com/SteveSanderson/knockout/downloads

Debug调试目的，可以使用非压缩版本(knockout-x.x.debug.js). 和压缩版本一样的功能，可是具备全变量名和注释的可读性源代码，而且没有隐藏内部的API。

1. 在你的HTML页面里使用<script>标签引用Knockout类库文件。

这就是你须要的一切…

 

开启模板绑定

…除非你想使用模板绑定功能（您颇有可能使用它，由于很是有用），那你须要再引用两个JavaScript文件。 KO1.3版的默认模板引擎是依赖jQuery 的jquery.tmpl.js（最新版2.0版已经不依赖jquery tmp了）。因此你须要下载下面的2个文件并在引用KO以前引用：

• jQuery 1.4.2 或更高版本

• jquery-tmpl.js — 此版本 能够很容易使用，或者你访问官方网站 查找最新版本。

正确的引用顺序：

<script type='text/javascript' src='jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='jquery-tmpl.js'></script>
<script type='text/javascript' src='knockout-1.2.1.js'></script>