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

  1. 隐藏代码Thereare<span data-bind="text:myItems().count"></span>items

就是这些!你不需要写代码去更新它,它的更新依赖于数组myItems的改变。同样, Add按钮的启用和禁用依赖于数组myItems的长度,如下:

  1. 隐藏代码<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. android XMl 解析神奇xstream 六: 把集合list 转化为 XML文档

    前言:对xstream不理解的请看: android XMl 解析神奇xstream 一: 解析android项目中 asset 文件夹 下的 aa.xml 文件 android XMl 解析神奇xs ...

  2. Git使用之设置SSH Key

    设置SSH Key 1.    检查是否已经有SSH Key. $cd ~/.ssh 如果说没有这个目录,就直接看第三步 2.    备份 3.    生成一个新的SSH. $ssh-keygen - ...

  3. 第一次开发PHP网页Hello PHP

    打开安装好的XAMPP的三个服务: 然后打开phpStorm,在Open选项选择文件目录(最后一个目录是htdocs)打开: 3.有时候可能无法修改php文件,会弹出一些提示窗口.那么就打开Finde ...

  4. Qt安装后配置环境变量(Mac)

    打开终端需要打开配置文件(注意这里不是bash_profile而是 .bash_profile,我开始少了".") 如果bash_profile文件不存在,就会自动创建,然后需要输 ...

  5. jquery1.0源码【1-60行】构造函数及全局$变量

    一.jquery源码1-60行 该部分代码主要完成jquery对象的创建,以及全局变量$与jQurey类的映射: /* * jQuery - New Wave Javascript * * Copyr ...

  6. 完全卸载VS2005或VS2008的步骤

    手动卸载步骤: Visual Studio Express Editions 进入控制面板,运行添加或删除程序  卸载 "MSDN Library for Visual Studio 200 ...

  7. 简答哈希实现 (nyoj 138 找球号2)

    例题链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=138 代码目的:复习哈希用 代码实现: #include "stdio.h&qu ...

  8. hdu 4856 Tunnels (记忆化搜索)

    Tunnels Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Su ...

  9. POJ 2513 Colored Sticks(欧拉回路,字典树,并查集)

    题意:给定一些木棒,木棒两端都涂上颜色,求是否能将木棒首尾相接,连成一条直线,要求不同木棒相接的一边必须是相同颜色的.   无向图存在欧拉路的充要条件为: ①     图是连通的: ②     所有节 ...

  10. 用UNIX消息队列实现IPC(以ATM为例)

    清明假期三天没出寝室的门,先是把独立的博客折腾好了.域名备案还没好.域名是ilovecpp.com,意为“我爱C++”,好羞涩,掩面,逃:).话说cnblogs.com的界面好丑 .其余大部分时间就是 ...