码迷,mamicode.com
首页 > 其他好文 > 详细

Introduction

时间:2015-01-23 17:44:39      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:

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/

Introduction

标签:

原文地址:http://www.cnblogs.com/huyang0528/p/4244483.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!