Knockout.js 初探

Knockout.js是什么？

Knockout是一款很优秀的JavaScript库，它可以帮助你仅使用一个清晰整洁的底层数据模型（data model）即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新（比如：依赖于用户行为的改变或者外部的数据源发生变化），KO都可以很简单的帮你实现，并且非常易于维护。

KO重要特性以及优点

I、KO重要特性

• 优雅的依赖跟踪-任何时候当数据源模型发生变化时，它都能够自动的更新你UI的指定内容。
• 声明绑定-它通过简单浅显的方式将你的UI与数据源模型进行绑定，你可以使用任意嵌套的结构模版来组建一个复杂的动态界面。
• 良好的可扩展性-通过简单的几行代码就可以实现一个自定义行为作为新的声明进行绑定。

II、其他优点：

• 纯JavaScript库-兼容任何服务器和客户端技术。
• 可以很好的应用到已有的应用程序中-而不需要程序主要架构发生变化。
• 简洁-采用Gzip压缩之后只要13K。
• 兼容任何主流浏览器-(IE 6+, Firefox 2+, Chrome, Safari, 及其他)
• 一套全面完整的规范（采用行为驱动开发）-这意味着在新的浏览器或平台中也能够很容易验证通过。

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

如何使用它？

Knockout的核心类库是纯JavaScript代码实现的，不依赖任何其他类库，所以按照如下步骤即将KO添加到你的项目里：

1、下载Knockout的最新版本，在正式开发和产品使用中，推荐使用默认的压缩版本（knockout.x.x.js）

下载地址：http://knockoutjs.com/downloads/index.html

对于调试使用，推荐使用完整的未压缩版本(knockout-x.x.debug.js)，压缩版和未压缩版功能相同，但是未压缩版本具有全变量名和注释，也没有隐藏内部的API，使得源代码更具可读性。

2、在你的HTML页面中通过<script>标签引用Knockout文件。

例如:

1	<script type='text/javascript' src='knockout-2.2.0.js'></script>

 

 

下面你就可以开始使用了。

如果你是刚开始学习Knockout，你可以先从互动式教学开始，看一些在线实例，或者仔细的阅读监控属性相关的帮助文档。

互动式教学地址：http://learn.knockoutjs.com/

在线实例：http://knockoutjs.com/examples/

帮助文档：http://knockoutjs.com/documentation/introduction.html

浏览器支持

Knockout在如下浏览器通过测试：

• Mozilla Firefox 2.0+（最新测试版本：3.6.8）
• Google Chrome（通过Windows and Mac 下的version 5测试；其它低版本也该可以工作）
• Microsoft Internet Explorer 6, 7, 8
• Apple Safari（Windows下的Safari 5测试，Mac OS X下的 Safari 3.1.2测试，以及iPhone下的Safari for iOS 4测试；高低版本应该都可以工作）
• Opera 10 for Windows

Knockout应该在以上这个浏览器的各版本上工作，但是由于太多版本，没有逐一测试。最新测试结果显示， Knockout在如下浏览器也是可以工作的（尽管没有对每个版本逐一测试）：

    Opera Mini

    Google Android OS browser (OS version 2.2)

测试Knockout能否在一个新平台或浏览器下工作，只需要下载源代码，然后在该浏览器里运行里面的/spec/runner.html文件即可测试。这个文件可以验证超过100个行为特性，如果有问题则会生成报表。上述浏览器的测试结果都应该是100%通过。

说说插件

Knockout也有丰富的插件可以使用，例如：

你可以使用集成JQueryUI功能的插件来实现autoComplete功能：

<input type="text" data-bind="autocomplete : autocompleteConfig"/>

而没必要每次都要声明下面这样的代码：

$( "#inputId" ).autocomplete({


            source: availableTags


        });

或者如果你想用表单验证功能，你可以使用验证插件:

var myObj = ko.observable('').extend({ max: 99 });

或者

<input type="text" data-bind="value: myProp" max="99"/>

而不是每次在点击提交按钮的时候或者离开焦点的时候都去检查。

 

KO与Jquery

KO和Jquery(prototype等)是相互竞争还是可以兼容一起使用？

每个人都很喜欢Jquery！在过去，我们不得不忍受各种不一致的DOM对象操作的API方法，Jquery的出现，很出色的代替了以往种种笨拙的框架，显得灵活易用。Jquery在Web页面元素操作和事件处理上显得相当出色并且易用，而KO是解决另外不同的问题的。

当你的UI界面稍微复杂且含有一些相同的行为的话，如果你仅仅只使用Jquery，那么UI处理上会比你想象的要复杂棘手，同时会让维护费用相当昂贵。思考这样一个例子：在一个表格里显示一个项目列表，统计表格中列表的数量，当项目列表数量小于5时启用“Add”按钮，否则就禁用。Jquery没有基本的数据模型概念，所以你想要获取项目列表的数量，你需要从表格table/tr/div这些数量上去进行推断才能知道。如果需要在某些SPAN里显示数据的数量，当添加新数据的时候，你还要记得更新这个SPAN的text。当然，你还要记住当总数>=5条的时候，你需要禁用Add按钮。然后，如果还要实现Delete功能的时候，你不得不指出哪一个DOM元素被点击以后需要改变。

用Knockout来实现又有何不同？

使用KO这一切都变得非常简单。它可以让你很轻易的扩展项目的复杂度，而不必担心由此产生的数据不一致问题。它仅仅只需要将你的数据转换成一个JavaScript数组，然后使用foreach将数据数组绑定到页面中的一个表格table或者一组div中。每当数据数组发生变化时，UI界面会自动响应改变（你不需要指出如何插入新行
或在哪里插入），剩下的就是UI界面数据同步了。例如：你可以声明绑定如下一个SPAN显示数据数量：

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 操作框架进行竞争。KO提供了一个数据模型与用户UI界面进行关联的高层次方式。KO本身不依赖jQuery，但是你可以一起同时使用jQuery， 生动平缓的UI改变需要使用jQuery。