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. HillStone上网认证客户端

    公司上网认证服务器从原来网康变更成山石(HillStone),原来网康是有认证客户端的,运行在系统托盘区,现在的Hillstone是通过网页页面认证的,要上网,这个认证页面就需要一直打开在那里.碰到异 ...

  2. 关于NSDate和NSDateFormatter的几个常用方法

    /** *  NSDate常见类方法 */ // 获得当前时间 NSDate *date1 = [NSDate date];   // 类方法 // NSDate *date1 = [[NSDate ...

  3. HTML5 -1- 简介

    在介绍HTML5之前我们应该先了解一下HTML5 我想从下面开始简单了解一下HTML5 什么是HTML5??? HTML5 即HTML 5.0 版本 正式制定时间是在2014年 遵循着移动先行(前四个 ...

  4. iOS开发中的一些细节BUG的解决

    这篇博客里我将不定期更新自己遇到的一些细节上的BUG,并提供解决方法,遇到同样问题的童鞋们可以参考交流一下. 1.关于tableView的tableHeaderView 请注意,我这里说的是table ...

  5. android media server 解析1-media player service 结构部分

    下面为media server注册的四个服务之一:MediaPlayerService的结构图 1.图中没有MediaPlayerService的代理对象BpMediaPlayerService部分, ...

  6. IOS之UI -- UITableView -- 2 -- 等高的Cell

    内容大纲: 1.纯代码 添加子控件 2.Autolayout纯代码 -- Masonry框架的使用 3.自定义等高的cell -- storyboard的使用(更加简单) 4.静态cell 等高的Ce ...

  7. 深入理解java虚拟机(2)------垃圾收集器和内存分配策略

    GC可谓是java相较于C++语言,最大的不同点之一. 1.GC回收什么? 上一篇讲了内存的分布. 其中程序计数器栈,虚拟机栈,本地方法栈 3个区域随着线程而生,随着线程而死.这些栈的内存,可以理解为 ...

  8. FLUSH TABLES WITH READ LOCK

    最近在mysql主从复制中用到锁,翻了资料回忆一下.一下内容参考于:http://blog.csdn.net/arkblue/article/details/27376991 1.FLUSH TABL ...

  9. 通过XmlSerializer 实现XML的序列化与反序列化

    通过XmlSerializer 我们可以十分简单的将Model与XML进行转换 官文在点这里 帮助类 using System; using System.Text; using System.Xml ...

  10. mac:ssh登陆总是需要输入钥匙串密码解决

    方法1: finder -> 左上角:前往->按住option建->多出一个资源->KeyChains->第一个文件夹(删除掉次文件夹) 然后重启即可 方法2: ssh- ...