我的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="width: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) })
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年