我的MVVM框架 v3教程——事件绑定与代理

这涉及到on绑定，表现形式为

data-on-type="callback" type为事件类型，callback为事件回调，使用事件绑定。

data-on-type="callback | selector" type为事件类型，callback为事件回调, selector为选择器，使用事件代理。

    <style>
        .even{
            background:lightgreen;
        }
        .odd{
            background:blue;
        }
        .hover{
            background: yellow;
        }
    </style>
    <div>
        你已经点击了 <span data-text="number"></span> 次
        <button data-on-click="click">点我</button>
    </div>
    <div data-on-mouseover="enableDetails" data-on-mouseout="disableDetails">
        <strong>Mouse over me</strong> 
    </div>
    <div data-display="detailsEnabled" style="400px;height:150px;background: #a9ea00;">
        Details
    </div>
    <ul data-each-p-index="fruits" data-on-mouseover="hover | li" data-on-mouseout="hover | li">
        <li data-text="p" data-class="index | helper"></li>
    </ul>

   require("avalon,ready", function($) {
                var VM = $.MVVM.toViewModel({
                    number: 0,
                    detailsEnabled: false,
                    enableDetails: function() {
                        VM.detailsEnabled(true);
                    },
                    disableDetails: function() {
                        VM.detailsEnabled(false);
                    },
                    click: function(){
                        var a = VM.number();
                        VM.number(a+1)
                    },
                    fruits:["苹果","橙子","鸭梨","火龙果","西瓜","樱桃"],
                    helper: function(index){
                        return index %2 ? "even" :"odd"
                    },
                    hover: function(e){
                        $(e.target).toggleClass("hover")
                    }
                })
    
                $.MVVM.render(VM)
            })

示例

你已经点击了 次 点我

Mouse over me

Details