当前位置: 代码迷 >> JavaScript >> knockoutjs - 运用Model-View-ViewModel (MVVM) 模式简化动态Javascript UI
  详细解决方案

knockoutjs - 运用Model-View-ViewModel (MVVM) 模式简化动态Javascript UI

热度:1099   发布时间:2012-11-25 11:44:31.0
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
  相关解决方案