Knockout.js是什么?

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

KO重要特性:

  • 优雅的依赖跟踪-任何时候当数据源模型发生变化时,它都能够自动的更新你UI的指定内容。

  • 声明式绑定-它通过简单浅显的方式将你的UI与数据源模型进行绑定,你可以使用任意嵌套的结构模版来组建一个复杂的动态界面。

  • 良好的可扩展性-通过简单的几行代码就可以实现一个自定义行为作为新的声明进行绑定。

其他优点:

  • 纯JavaScript库-兼容任何服务器和客户端技术。

  • 可以很好的应用到已有的应用程序中-而不需要程序主要架构发生变化。

  • 简洁-采用Gzip压缩之后只要13K。

  • 兼容任何主流浏览器-(IE 6+, Firefox 2+, Chrome, Safari, 及其他)

  • 一套全面完整的规范(采用行为驱动开发)-这意味着在新的浏览器或平台中也能够很容易验证通过。

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

如何使用它?

最快速、最有趣的方式就是通过互动式教学的方式来开始学习,一旦你掌握了最基本的技巧,学习了每个在线实例,你就可以在你的项目中一展身手了。

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显示数据数量:

隐藏代码Thereare<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。

汤姆大叔的Knockout学习系列

http://www.cnblogs.com/TomXu/tag/Knockout/

Knockout学习地址的更多相关文章

  1. knockout学习笔记目录

    关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...

  2. React 学习笔记(学习地址汇总)

    好的博文地址:http://www.ruanyifeng.com/blog/2015/03/react.html 官网学习地址:http://facebook.github.io/react/docs ...

  3. 学习地址(oraclemysqllinux)

    1.安装配置 http://blog.chinaunix.net/uid-27126319-id-3466193.htmlhttp://www.cnblogs.com/gaojun/archive/2 ...

  4. 微软ASP.NET MVC 学习地址

    微软ASP.NET MVC4.0学习地址:http://www.asp.net/mvc

  5. jmeter、java自动化学习地址

    自动化学习社区地址:http://www.hordehome.com/c/14-category jmeter学习地址(范丰平博客):http://www.cnblogs.com/fengpingfa ...

  6. .Net Core学习地址

    官方教程:https://docs.microsoft.com/zh-cn/aspnet/core/ 入门无忧网:http://www.rm5u.com/netcore/netcore-intro.h ...

  7. python 学习地址

    本章主要记录学习python过程中借鉴的一些网站,并感谢这些博主辛勤付出. python官网:https://www.python.org/ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  8. UML 学习地址

    UML 学习地址 网址:http://www.uml.org.cn/oobject/201609092.asp http://www.uml.org.cn/oobject/201009081.asp ...

  9. layui学习地址

    --layui学习地址 ,相当之好用,非常感谢为我们工作和学习提供方便的才子们,谢谢~https://www.layui.com/demo/layim.html

随机推荐

  1. Creating External Lists From Code

    You can create an external list based on an entity (external content type) defined in SharePoint Bus ...

  2. 安装sql server managerment studio报错"The instance id is required but it is missing"

    问题描述: 今天在安装sql server managerment studio的时候提示报错"The instance id is required but it is missing&q ...

  3. File类的常用方法

    public static void GetFileInfo()    {                File file=new File("e:","two.txt ...

  4. AndroidDevTools下载地址

    Android Dev Tools官网地址:www.androiddevtools.cn http://www.androiddevtools.cn/ http://wear.techbrood.co ...

  5. Struts2(十三)国际化-internationalization

    一.国际化是什么--I18N 即internationalization 首字母i-结束字母n之间有18个字母 特征:在程序不做修改的情况下,可以根据不同的语言环境显示相应内容 二.Java内置国际化 ...

  6. 我对XCode Objective-c Cocoa的简单理解

    我对XCode Objective-c Cocoa的简单理解 Xcode Xcode说的通俗一点就是开发OS X 和 iOS 应用程序的. 如果我们想要认真点说 ,Xcode 是运行在操作系统Mac ...

  7. UIView与CALayer的区别

    1.UIView相比CALayer最大区别是UIView可以响应用户事件,而CALayer不可以.UIView侧重于对显示内容的管理,CALayer侧重于对内容的绘制. 2.UIView和CALaye ...

  8. iOS开发 使用RMStore简化内购代码 + 内购买订单验证

    现在很多的app里面都添加了应用内购买,网上关于苹果证书的生成和设置的教程比较多,这里就不多赘述了,推荐几个个人觉得说的比较详细的网址: http://www.jianshu.com/p/86ac7d ...

  9. 选择排序(java版)

    public class SelectSortTest { public static void selectSort(int[] source) { for (int i = 0; i < s ...

  10. iOS开发之网络编程--2、NSURLSessionDownloadTask文件下载

    本文内容大纲: 1.回顾NSURLSessionTask 2.NSURLSessionDownloadTask大文件之block下载 3.NSURLSessionDownloadTask大文件之代理方 ...