标签:
knockout是一个JavaScript库,它可以帮助你动态更新UI,简单且可维护。
三大特性:
1.依赖跟踪--数据模型改变时,UI使用此数据的位置(view)将自动更新。
2.声明绑定(binding)--数据模型与UI的元素绑定,这一过程非常简单。
3.可扩展--几行简单的代码就可以实现一个自定义绑定。ps:内置绑定功能较简单。
KO VS. Jquery
人人都爱JQuery。JQuery是操作元素和事件的高手,但KO解决的是其他的问题。
比如,1.显示一个列表 2.显示列表项的数目 3.如果列表项数目小于5,添加按钮可用,否则不可用。
JQuery没有数据模型的概念,因此,要获取列表项数目就要通过class来获取列表,再来获取列表项数目。列表项数目包裹在一个span标签中,添加了新的列表项后就必须要更新这个span标签的文本。同时,当列表项为5时,就要让添加按钮不可用。
JQuery如此复杂,那用KO怎么做呢?ko实现这个功能非常简单:将列表项声明为数组,用foreach绑定并传给列表 。此时只要数组改变,UI就会发生相应的改变。比如,给一个span标签声明绑定列表项的数目:
1 There are <span data-bind="text:myItems().count"></span> items
上面一行代码足以解决问题!当myItems数组变化时,span标签的文本自动更新。同样,依赖于列表项数目的添加按钮也可以这么写:
1 <button data-bind="enable:myItems().count<5" >Add</button>
总结:KO提供高效的方法将数据模型同UI相关联,它并不依赖于JQuery,但可与JQuery同时使用。
前端小白,初次接触knockout,简单翻译一下官网教程,如有疏漏,请不吝赐教~^_^(如想深入学习,请进汤姆大叔的博客园http://www.cnblogs.com/TomXu/)
标签:
原文地址:http://www.cnblogs.com/huyang0528/p/4244483.html