Knockout是一个JavaScript库,它可以帮助您使用干净的底层数据模型创建丰富、响应迅速的显示和编辑器用户界面。每当您的UI部分动态更新时(例如,根据用户的操作或外部数据源更改而更改),KO都可以帮助您更简单、更易于维护地实现它。 **主要特色:** 优雅的依赖项跟踪-每当数据模型更改时,自动更新UI的正确部分。 声明性绑定—一种简单而明显的方式,用于将UI的各个部分连接到数据模型。您可以使用任意嵌套的绑定上下文轻松构建复杂的动态UI。 简单可扩展-将自定义行为实现为新的声明性绑定,以便在几行代码中轻松重用。 **其他好处:** 纯JavaScript库-适用于任何服务器或客户端技术 可以添加到现有web应用程序之上,而无需进行重大的体系结构更改 压缩-压缩后约13kb 适用于任何主流浏览器(IE 6+、Firefox 2+、Chrome、Safari、Edge等) 全面的规范套件(开发的BDD样式)意味着它的正确功能可以在新的浏览器和平台上轻松验证 ***** 熟悉RubyonRails、ASP.NETMVC或其他MV*技术的开发人员可能会将MVVM视为具有声明性语法的实时形式的MVC。从另一个意义上讲,您可以将KO视为一种制作用于编辑JSON数据的UI的通用方法…… ***** **KO打算与jQuery(或Prototype等)竞争还是与之合作?** 每个人都喜欢jQuery!它是我们过去不得不忍受的笨拙、不一致的DOM API的杰出替代品。jQuery是操纵网页中的元素和事件处理程序的一种优秀的低级方法。KO解决了一个不同的问题。 一旦您的UI变得非常重要,并且有一些重叠的行为,如果您只使用jQuery,那么维护起来就会变得非常棘手和昂贵。考虑一个例子:您正在显示一个项目列表,列出该列表中的项目数量,并希望只有在少于5个项目时启用一个“添加”按钮。jQuery没有底层数据模型的概念,因此要获得项目的数量,必须从表中tr的数量或具有特定CSS类的div的数量中推断出来。可能项目的数量显示在某个范围内,您必须记住在用户添加项目时更新该范围的文本。当TR数为5时,您还必须记住禁用“添加”按钮。稍后,还要求您实现一个“删除”按钮,并且您必须确定在单击该按钮时要更改哪些DOM元素。 ***** knockout有什么不同? 有了KO就容易多了。它可以让您在复杂度上进行扩展,而不必担心引入不一致性。只需将项目表示为JavaScript数组,然后使用foreach绑定将该数组转换为一个表或一组div。每当阵列更改时,UI都会更改以匹配(您不必知道如何注入新的TR或在何处注入它们)。UI的其余部分保持同步。例如,可以声明性地绑定范围以显示项目数,如下所示: `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,但您当然可以同时使用jQuery,而且如果您想要动画转换之类的东西,这通常非常有用。