knockoutjs -- 使用Model-View-ViewModel (MVVM) 模式简化动态Javascript UI
Knockout 是个JavaScript library,帮助创建丰富的显示和编辑器UI,通过干净的底层数据模型。你可以在任何时候动态更新UI的选择部分。
knockout.js
官网:http://knockoutjs.com/
帮组文档:http://knockoutjs.com/documentation/introduction.html
交互式练习:http://learn.knockoutjs.com/
网上的例子:http://knockoutjs.com/examples/
关键概念:
- 1, 声明式绑定:很容易地使用一简单可读的语法来关联DOM元素和model数据;
- 2, 自动UI刷新(同步):当model数据的状态发送变化,UI就会自动刷新;
- 3, 自动依赖跟踪:隐含建立model数据,关键模型数据(compute计算出来的),目标内容的链式关系并组合起来,当model的数据发生变化时,关联模型数据、view显示的内容也会同步变化
- 4, 模版引擎:能快速根据模型数据生成复杂,嵌套的UI
更多特性:
- 1, 免费,MIT协议开源
- 2, 轻量级,缩小后39k gzip传输约13k
- 3, 纯Javascript,可以和任何Web架构集成
- 4, 不依赖其他任何东西
- 5, 支持所有主流浏览器:IE6+, Firefox2+, Chrome, Opera, Safari (desktop/mobile)
- 6, 全文档支持:API, examples, 交互式手册
调试: 使用knockout-x.y.z.debug.js文件,
各控件的使用方法,如下拉框,单选框等
所有可用的binding值
文字和显示:visible, text, html, css, style, attr
流程控制:foreach, if, ifnot, with
form字段:click, event, submit, enable, disable, value, hasFocus, checked, options, selectedOptions, uniqueName
模版:template
自定义blinding