Knockoutjs介绍

目录(?)[-]

1. OK 如何使用它
2. KO和jQuery 或Prototype等是竞争关系还是能一起使用
   1. Knockout的实现有何不同

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

重要特性:

• 优雅的依赖追踪 - 不管任何时候你的数据模型更新，都会自动更新相应的内容。
• 声明式绑定 - 浅显易懂的方式将你的用户界面指定部分关联到你的数据模型上。
• 轻易可扩展 - 几行代码就可以实现自定义行为作为新的声明式绑定。

额外的好处：

• 纯JavaScript类库 – 兼容任何服务器端和客户端技术
• 可添加到Web程序最上部 – 不需要大的架构改变
• 简洁的 - Gzip之前大约25kb
• 兼容任何主流浏览器 - (IE 6+、Firefox 2+、Chrome、Safari、其它)
• 采用行为驱动开发 - 意味着在新的浏览器和平台上可以很容易通过验证。

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

OK, 如何使用它？

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

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界面也会响应改变（不用指出如何插入新行或在哪里插入），剩余的工作就是同步了。例如：你可以声明绑定如下一个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。

http://lab.hupo.be/ko/doc/introduction.html