knockoutjs介绍(译文)

介绍

knockoutjs 是一个能够帮助你创建一个具有干净基础数据模型的丰富、响应的显示和编辑器用户界面的一个JavaScript库。
任何时候,动态更新UI的部分(例如,根据用户的行为而改变或当外部数据源改变时),KO对象可以帮助你更简单和更容易地实现它。

标题特点

  • 优雅的依赖跟踪

    每当数据模型发生变化时,自动更新UI的对应数据改动部分。

  • 声明绑定

    将UI部分连接到数据模型的简单且明显的方法,你可以使用任意嵌套的绑定上下文来构造复杂的动态UI界面。

  • 简单的可扩展性

    实现自定义行为作为新的声明绑定,以便只在几行代码中重复使用。

额外的好处

  • 纯javaScript库

    与任何服务器或客户端技术一起工作,可以在现有Web应用程序的顶部添加,而不需要更改主要的架构。

  • 精细

    压缩后大约13KB大小。

  • 在任何主流浏览器上工作

    IE6+,Firefox2+,Chrome,Safari,Edge,其他。

  • 全面的规范套件

    开发BDD模式,意味着其正确的功能可以很容易地在新浏览器和平台上得到验证。

    熟悉Ruby on Rails、ASP、.NET、MVC或者其他MV视图模型技术的开发人员可以将MVVM视为具有声明语法的MVC的实时形式。从另外一个意义上说,你可以把KO对象看作是一个通用的方式来让UI编辑JSON格式的数据的功能型对象,它将全面为你服务。

怎么使用它?

最快也是最有趣的方法是通过交互教程。一旦你掌握了基础知识,就去探索实际的例子,然后在你自己的项目中进行尝试。

KO对象是否打算与JQuery(或者Prototype等)竞争呢?

每个人都喜欢JQuery,它使我们过去不得不忍受的笨拙的、不一致的DOM API的杰出替代品。
Jquery是在页面中操纵元素和事件处理程序的一种很好的初级方式,而KO对象解决了一个不同的问题。
考虑一个实例:你正在显示一个项目列表,列出该列表中的项目数据量,并希望只有在少于5个项目时启用一个添加按钮,
可能项目的数量在某个范围内显示,并且当用户添加一个项目时,你必须记住更新该跨度的文本。当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,而且如果你想要动画过度之类的东西,这通常需要用到它。

原文地址:http://knockoutjs.com/documentation/introduction.html
学习Java的同学注意了!!! 
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入Java学习交流群,群号码:543120397 我们一起学Java

猜你喜欢

转载自blog.csdn.net/u014344668/article/details/80309979