Ruby's Louvre

每天学习一点点算法

导航

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

机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年

posted on 2013-05-17 18:55  司徒正美  阅读(3937)  评论(10编辑  收藏  举报