Knockout学习地址
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学习地址的更多相关文章
- knockout学习笔记目录
关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...
- React 学习笔记(学习地址汇总)
好的博文地址:http://www.ruanyifeng.com/blog/2015/03/react.html 官网学习地址:http://facebook.github.io/react/docs ...
- 学习地址(oraclemysqllinux)
1.安装配置 http://blog.chinaunix.net/uid-27126319-id-3466193.htmlhttp://www.cnblogs.com/gaojun/archive/2 ...
- 微软ASP.NET MVC 学习地址
微软ASP.NET MVC4.0学习地址:http://www.asp.net/mvc
- jmeter、java自动化学习地址
自动化学习社区地址:http://www.hordehome.com/c/14-category jmeter学习地址(范丰平博客):http://www.cnblogs.com/fengpingfa ...
- .Net Core学习地址
官方教程:https://docs.microsoft.com/zh-cn/aspnet/core/ 入门无忧网:http://www.rm5u.com/netcore/netcore-intro.h ...
- python 学习地址
本章主要记录学习python过程中借鉴的一些网站,并感谢这些博主辛勤付出. python官网:https://www.python.org/ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- UML 学习地址
UML 学习地址 网址:http://www.uml.org.cn/oobject/201609092.asp http://www.uml.org.cn/oobject/201009081.asp ...
- layui学习地址
--layui学习地址 ,相当之好用,非常感谢为我们工作和学习提供方便的才子们,谢谢~https://www.layui.com/demo/layim.html
随机推荐
- MySql中时间类型总结
最近建表要用到时间类型的数据,但对时间类型的数据一向不了解,就总结了一下.. 一.日期DATE 一个日期.支持的范围是“1000-01-01”以“9999-12-31”.MySQL显示日期用 “YYY ...
- iOS开发之NSTimer使用初探
创建一个定时器(NSTimer) - (void)viewDidLoad { [super viewDidLoad]; [NSTimer scheduledTimerWithTimeInterval: ...
- PMP 项目管理过程组与知识领域
- Git基本使用命令
整理Git的一些基本使用命令. # 1)克隆代码 boldseas@lian-PC MINGW64 /d/TestGroup $ git clone ssh://git@code.boldseas ...
- PHP模拟发送POST请求之一、HTTP协议头部解析
WEB开发中信息基本全是在POST与GET请求与响应中进行,GET因其基于URL的直观,易被我们了解,可POST请求因其信息的隐蔽,在安全的同时,也给开发者们模拟发送带来了麻烦.接下来的几篇博文中,我 ...
- APP原型设计工具,哪家强?转自知乎
著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:李志超 链接:http://www.zhihu.com/question/20403141/answer/25329730 ...
- 在jsp中默认写上的一段java代码表示basePath 的路径的具体的意思是什么?
<% String path = request.getContextPath(); String basePath = request.getScheme() + "://" ...
- 安装SQL Server2008,要重启机器,解决办法
安装SQL Server2008时,总提示有挂起,要重启机器:重启之后还是有相应的提示,该怎么办呢? 其实只要删除一个注册表项就可以了: 1. 打开注册表编辑器 开始菜单—>运行->re ...
- JavaScript中的直接量与初始器的区别
很多代码优化及公司规范都会提到 写对象不应该 var obj = new Object() 而应该 var obj = {} 写数组不应该 var arr = new Array() 而应该 var ...
- IE11的API变化
IE11已经登录Win8.1,它的API有了很大变更 一.User-agent字符串的更改 IE10的是 Mozilla/5.0 (compatible; MSIE 10.0; Windows NT ...