knockoutjs介绍

Knockout是一个JavaScript库，可帮助您使用干净的底层数据模型创建丰富，响应式的显示和编辑器用户界面。任何时候你都有动态更新的UI部分（例如，根据用户的动作或外部数据源的变化而改变），KO可以帮助你更简单和可维护地实现它。

标题特点：

• 优雅的依赖关系跟踪 - 只要数据模型发生变化，就会自动更新UI的正确部分。
• 声明式绑定 - 将用户界面的各个部分连接到数据模型的简单而明显的方式。您可以使用任意嵌套的绑定上下文轻松构建复杂的动态UI。
• Trivially可扩展 - 将自定义行为实现为新的声明性绑定，以便在几行代码中轻松重复使用。

额外的好处：

• 纯粹的JavaScript库 - 适用于任何服务器或客户端技术
• 可以添加到现有的Web应用程序之上，而不需要进行重大的体系结构更改
• 紧凑 - 在gzipping之后大约13kb
• 适用于任何主流浏览器（IE 6+，Firefox 2+，Chrome，Safari，Edge等）
• 全面的规范套件（开发的BDD风格）意味着它的正确功能可以在新的浏览器和平台上轻松验证

熟悉Ruby on Rails，ASP.NET MVC或其他MV *技术的开发人员可以将MVVM视为具有声明性语法的实时MVC形式。从另一个角度来说，你可以把KO看作一种制作用于编辑JSON数据的UI的通用方法......无论对你有用:)

好的，你如何使用它？

最快最有趣的入门方式是通过交互式教程进行工作。一旦掌握了基本知识，就可以探索实例，然后在自己的项目中进行实践。

KO打算与jQuery（或Prototype等）竞争还是与之协作？

大家都喜欢jQuery！它是我们过去必须忍受的笨重，不一致的DOM API的杰出替代品。jQuery是处理网页中元素和事件处理程序的极好的低级方法。KO解决了另一个问题。

只要你的UI变得不平凡并且有一些重叠的行为，如果你只使用jQuery，事情会变得棘手和昂贵。考虑一个例子：您正在显示一个项目列表，列出该列表中的项目数量，并且只在少于5个项目时启用“添加”按钮。jQuery没有基础数据模型的概念，因此要从表中的TR数量或具有某个CSS类的DIV数量中获得必须推导的项目数量。也许项目的数量显示在某个SPAN中，并且您必须记住在用户添加项目时更新该SPAN的文本。当TR数量为5时，您还必须记住禁用“添加”按钮。稍后，系统会要求您执行“删除”按钮，并且必须确定每次点击时要更改哪些DOM元素。

Knockout有何不同？

KO更容易。它可以让您扩大复杂性，而不用担心引入不一致。只需将您的项目表示为JavaScript数组，然后使用foreach绑定将此数组转换为TABLE或DIV组。只要数组发生变化，用户界面就会变为匹配（您不必知道如何注入新的TR或注入它们的位置）。用户界面的其余部分保持同步。例如，您可以声明性地绑定SPAN以显示项目数量，如下所示：

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

仅此而已您不必编写代码来更新它; 它在myItems阵列更改时自行更新。同样，要使“添加”按钮启用或禁用取决于项目的数量，只需编写：

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

后来，当你被要求实现“Delete”功能时，你不必弄清楚它需要与哪些UI进行交互; 你只是让它改变底层的数据模型。

总结一下：KO不会与jQuery或类似的低级别DOM API竞争。KO提供了将数据模型链接到用户界面的补充高级方法。KO本身并不依赖于jQuery，但是你当然可以同时使用jQuery，而且如果你想要像动画转换一样的东西，这也是非常有用的。