我的MVVM框架 v3教程——流程绑定

avalon为我们带来了三大利点：

• 关注点分离
• 操作数据即操作DOM
• 动态模板

关注点分离是MVVM与身俱来的。

操作数据即操作DOM，是VM中的访问器带来的。

动态模板是流程绑定实现的。

avalon目前拥有四种流程绑定器：each, with, if, unless。

先给出JS部分代码：

 require("avalon,ready", function($) {
                var $$ = $.MVVM     
                var VM = $$.render({
                    user:{
                        xxxx: "aaaa",
                        yyyy: "bbbb"
                    },
                    list:[{
                            title:"aaa"
                        },
                        {
                            title:"bbb"
                        },
                        {
                            title:"ccc"
                        },
                        {
                            title:"ddd"
                        }
                    ],
                    toggle: true
                });
                setTimeout(function(){
                    VM.toggle(false)
                },2500)
});

each是用于遍历数组与集合，对应到HTML的绑定形式为：data-each-[item]-[index]

 <ul data-each-item="list">
            <li data-text="item.title">aaaa</li>
 </ul>

with能让用户直接在下级元素中直接使用这个对象的第一层的键名作为参数，就像js的with一样，ko2.1之前就是直接这么干的。不过avalon是通过特权函数与原型函数模拟这效果的。

 if( code == 2 ){      //处理with 绑定
                            var fn = function(){}//随便搞个构造器
                            fn.prototype = model;//让它继承原来的VM，或VM某一层的对象属性
                            model = new fn;      //然后得到它的实例
                            for(var name in val){//然后遍历with的参数对象的键值对，将它们赋给实例。
                                if(val.hasOwnProperty(name)){//因此访问时会先访问val的第一层值，没有到原型链上找
                                    model[name] = val[name]
                                }
                            }
                        }

        <div data-with="user">
            <p data-text="xxxx"></p>
            <p data-text="yyyy"></p>
        </div>

if绑定，如果它的参数是真值，那么它就渲染它的子节点，否则里面为空。

if绑定，如果它的参数是假值，那么它就渲染它的子节点，否则里面为空。

        <div data-if="toggle">
            这是诸葛亮
        </div>
        <div data-unless="toggle">
            这是周瑜
        </div>

示例

• aaaa

这是诸葛亮

这是周瑜