Ruby's Louvre

每天学习一点点算法

导航

我的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
 

 
这是诸葛亮
这是周瑜

posted on 2012-12-15 09:50  司徒正美  阅读(1550)  评论(0编辑  收藏  举报