简介
Knockout(简称KO)是一个JavaScript库,可以帮助您用干净的底层数据模型创建丰富的反应迅速显示和编辑用户界面。任何时候你有UI的部分是动态更新(例如,根据用户的行为或者外部数据源的变化而变化),用KO可以帮助您实现起来简单。
KO主要功能
- 优雅的依赖性跟踪 -当数据模型变化时,自动更新你的UI。
- 声明绑定-一个浅显的方式来将UI的部分连接到你的数据模型。您可以轻松地构建利用任意嵌套绑定上下文来组成复杂的动态用户界面。
- 扩展-使用短短的几行代码重用实现自定义行为。
KO的一些好处
- 纯JavaScript库-适用于任何服务器或客户端技术
- 可以在您现有的web应用程序的顶部加入,而无需重大的架构改变
- 紧凑型 - 体积只有13kb
- 适用于任何主流浏览器(IE6+,火狐2+,Chrome浏览器,Safari浏览器,其他)
熟悉Ruby on Rails的,ASP.NET MVC,或者其他MV*技术的开发人员可能会看到MVVM作为MVC与声明语法实时的形式。在令一种意义上,你可以把KO作为一般的方法,使用户界面进行编辑JSON数据。
ko与jQuery的关系
每个人都喜欢jQuery!jQuery是一个极好的低级别的方式来操纵网页中的元素和事件处理程序。KO解决不同的问题
只要你的用户界面变得复杂而有一些重叠的行为,事情可能会变得几首和维护成本变得昂贵,如果你只是用jQuery。举个例子:你显示的项目清单,说明在该列表中的项目数,并希望当有超过500项的减少后仅启用“添加”按钮。jQuery不具有基本的数据模型的概念,所以要得到你必须从元素的一个表中的数字或DIV具有一定css类的数量推断他的项数。也许项目数显示在某些SPAN标记中,当用户添加一个项目需要记得更新span的文字。还需要记住禁用“添加”按钮当元素的数量大于5之后。
kO来弥补这一切
相对之前提到的。如果使用KO则容易的多。比如JavaScript数组,然后用foreach绑定这个数组转换成表或设置到DIV。每当数据模型变化时,用户界面也会随之变化(你不必弄清楚后年是如何注入新的TR)。让UI的其余部分保持同步。例如,您而已声明绑定到一个SPAN显示项目数,代码如下:
There are <span data-bind="text:myItem().length"></span>item
你不必编写代码来更新它;它更新的数据源来自myItems数组的变化。同样,为了使“添加”按钮在项目数量小于5时启用,只需要写如下代码:
<button data-bind="enable:myItem().length<5">Add</button>
总结
KO与jQuery并非竞争关系。KO只是提供互补,通过数据监控方式将数据模型链接到的UI。KO本身不依赖jQuery,但可以与jQuery同时使用。