我的MVVM框架 v3教程——流程相关

涉及到each, with, if, unless这四种绑定

each绑定在HTML表现为data-each-*-*，其中第一个*为值，第二个*为键名，*只是一个占位符，只要是合法的变量名就OK。第二个*是可选的。在数组中，每一个*你可以称之为元素，第二个为元素的索引值。换言之，each与PHP的foreach那样可以同时处理数组与对象。

with绑定在HTML表现为data-with，允许你将对象的第一层属性拿出来直接调用。

if绑定在HTML表现为data-if，如果它的参数的返回值为false，那么它就不再渲染它的子节点，你在DOM树中看到它们。

unless绑定在HTML表现为data-unless，与if作用相反，为假时显示，真的移除子节点。

 <div data-on-mouseover="enableDetails"  >
                Mouse over me
 </div>

比如上面这HTML，元素为DIV，绑定器的名字为data-*的属性名的第二个单词on，亦即为事件绑定器，参数为它去掉data-on-剩下的单词，亦即要用到mouseover事件，回调是属性值，enableDetails可能是访问器也可能是命令，这由用户在ViewModel中定义。不过通常情况下它是个普通的函数。我们也可以使用事件代理。

      

            
aaaa
        
        

              
        
        

        

              
        
        

            这是诸葛亮
        
        

            这是周瑜
        

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

                setTimeout(function(){
                    VM.toggle(false)
                },4500)

            })

示例

• aaaa

 

---

 

这是诸葛亮

这是周瑜