Knockout v3.4.0 中文版教程-1-入门和安装

英文原版教程：http://knockoutjs.com/documentation/introduction.html
注：此教程根据英文原版翻译，仅做练习，若有不足或错误，请指正

说明：
对原文中的一些单词的翻译是参考汤姆大叔的翻译方式，以下：

observable 监控
observable array 监控数组
computed observable 计算监控
pure computed observable 纯计算监控

1. 入门

1.Knockout怎样工做的以及带来了什么好处

1. 简介

Knockout是一款很优秀的JavaScript库，它能够帮助你经过一个简洁的数据模型建立一个丰富的、响应式显示和编辑的用户界面。不管什么时候你的UI界面的一部分有动态改变（好比，由用户的操做引发的改变或者一个扩展数据源改变），KO 都能用更简单的和可维护的方式实现它。
主要特性：

• 优雅的依赖追踪 - 不管你的数据模型何时发生改变都能自动更新你的UI须要更新的部分。
• 声明式绑定 - 一种简单明了的方式让你的数据模型和UI部分关联，你可使用任意的嵌套的绑定上下文轻易地构建出一个复杂并且动态的UI界面。
• 良好的可扩展性 - 实现自定义行为做为新的声明绑定，这样经过短短几行代码就能很容易实现代码重用。

额外的好处：

• 纯Javascript库 - 兼容任何服务端和客户端技术
• 能够友好的添加到你已经有的web应用程序 - 不须要主程序框架改动
• 小巧的 - 经过gzip压缩后只有13kb大小
• 兼容各类主流浏览器(IE 6+, Firefox 2+, Chrome, Safari, Edge, 其余)
• 有一套完整的规范（采用BDD开发，BDD，行为驱动开发）这意味着在新的浏览器和平台上功能均可以正确容易地经过验证。

开发者若是熟悉Ruby on Rails, ASP.NET MVC,或者其余MV*技术框架可能会把MVVM看做一个使用声明式语法的MVC实时form，换句话说，你能够把KO当作是经过编辑JSON数据来构建UI界面的一种方式。。。不管你要作什么：）

2. 如何使用它？

最快也是最有趣的入门方式是经过交互式教学指导。一旦你掌握了基础，学习了在线示例，你就能够在你的项目中使用KO了。

3. KO和jQuery(或者 Prototype等等)是存在竞争关系仍是能够一块儿工做？

全部人都喜欢 jQuery！它是咱们在过去不得不使用的难用且混乱的DOM API的一种优秀的替代方案。jQuery能够经过优秀的底层API的方式操做网页上的dom元素和处理事件。KO是用于解决其余的一些问题。

只要你的UI界面变得复杂并且有重复性行为，若是仅仅使用jQuery,项目会变得愈来愈复杂，并且维护代价很大。举个例子，你显示一个列表，并且想要当列表项仅仅在少于5项时会显示一个添加按钮。jQuery里面没有基础数据模型的概念，因此为了统计列表当前有多少项，你得计算一下table元素下tr元素的数量或者经过某些CSS类名来获取DIV的数量。这些项也许是经过SPAN元素来显示，你还得在用户添加新项的时候更新列表的内容，你还得记得当列表项数量大于等于5的时候隐藏添加按钮。以后，你被要求实现删除功能，你得在当删除按钮被点击的时候找出哪一个列表项发生了变化。

4. KO有什么不一样？

上述例子的情形对KO来讲小菜一碟。它能让你的项目在提升复杂性的时候不用惧怕致使项目不稳定。只是把上述的列表项做为一个Javascript里面的数组，而后使用foreach绑定把数组转换为table或者div集合，当数组发生改变的时候，对应的UI会一块儿改变（你不须要考虑怎样插入新的tr标签或者要插在哪里）。剩下的UI会保存同步。好比，你能够声明绑定一个SPAN标签来显示列表项的数量，以下所示：

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

就是这样，你不用写更新列表项的代码，它会在myItems数组发生改变的时候自动更新，一样，可使添加按钮的显示隐藏由列表项的数量控制，以下：

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

以后，当你被要求实现删除功能的时候，你不须要考虑UI和数据模型是怎么交互的细节，你只须要改变基础数据模型便可。

总结：KO并无和jQuery或者其余相似的优化操做底层的DOM API的库存在竞争关系。KO提供了能够和其余库互补的，经过高层次的方式对UI和数据模型进行关联。KO自己也不依赖jQuery，可是在使用KO的同时使用jQuery，并且若是你想制做一些动画特效，jQuery每每是必须的。

2.下载和安装

下载就自行去官网下载便可，地址：http://knockoutjs.com/downloads/index.html

1. 经过Bower安装

bower install knockout

2. 安装

像jQuery那样引入就行了