迷你 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，做登录后无缝刷新页面这样操作毫无压力。