迷你 MVVM框架avalon的使用教程
最近有许多人问我怎么用这东西，如果是那些用过knockout的人还好，之前没有接触过MVVM的人可能一头雾水。大多数人被我那个jquery ui的演示吸引过来，都深感它的威力之大。
这里详细介绍一下它的用法吧。
第一步，当然是引入avalon库，就像引入jQuery库那样，当然要从官网下。现在avalon的地址为这个，只要这个文件就好了，当然旁边还有个avalon_min.js。
第二步，是创建ViewModel，就是MVVM最后那两个字母的全称。它是M的再包装，用于自动同步视图，当然视图也能自动同步VM。VM与V这 种双向绑定的特性非常诱人，可以让我们少写无数代码，尤其是那样麻烦的DOM代码。虽然jQuery提供了强大的DOM操作，但还是你一个个去选择操作。 MVVM完全让你脱离DOM的桎梏，带着生产力的飞跃。其效果不亚于后端的ORM框架让人们从各种数据库与SQL的兼容之苦释放出来那样舒心。如果顺着这 比喻，ViewModel其实与数据库中的表一样，ViewModel中的属性就是表中的字段。一个表专门负责某一个版块的数据存储，而一个 ViewModel专门负责页面上某个区域的渲染工作。因此这里有个作用域的概念，一个ViewModel是专门作用于页面上某个区域。不过，这里换上 CSS的思路理解会更好，一个CSS类名会对添加了它的元素及其孩子发生影响。avalon把这个绑定称之为ms-controller（这来自 angular的名字），有关ms-controller的更多描述可见这里。
avalon.ready(function() { avalon.define("area", function(vm) { vm.xxx = "xxx" vm.yyy = "yyy" vm.toggle = true; vm.$watch("toggle", function(newValue, oldValue) {//监听toggle的变化,一变就执行回调 console.log(newValue); //这里可以做更多你喜欢做的事 //通常,我们不宜在这里写太多DOM逻辑,因为DOM操作基本框架绑定你干了 //你只需要这里设置其他vm中的属性的新值，通过多米诺骨牌效应驱动页面自动刷新 }); }); avalon.scan() //avalon.scan可以传入两个可选参数，第一个作为扫描起点的元素节点，如document.body, //第2个ViewModel,avalon.define是有返回值，直接放进去(详见文档)}) |
第三步，对视图进行绑定。其中最重要的是ms-controller，用于圈定ViewModel的作用域，然后在它本身与孩子中进行其他绑定。
<p ms-controller="area" ms-visible="toggle"><span>{{xxx}}</span><span ms-class-red="toggle">{{xxx}}</span></p> |
绑定是我们处理DOM的重要渠道。如果学过knockout的人，可以到这里看它们怎么用，或者看官网的示例与文档。
avalon能帮你做什么？
- 数据填充，比如表单的一些初始值，切换卡的各个面板的内容({{xxx}},{{xxx|html}}, ms-html)
- 类名处理，如隔行变色，掠过变色(ms-class, ms-hover)
- 事件绑定(ms-click)
- 属性处理(ms-checked, ms-href, ms-disabled)
- 数据格式化与验证(过滤器与$watch)
- 将某个元素转为一些功能更强大的UI，如果拖动块，滑动块，弹出层，颜色选择器，手风琴，切换卡……
有了avalon，做登录后无缝刷新页面这样操作毫无压力。