我的MVVM框架 v3教程——集合处理
avalon的一个理念是,操作数据即操作DOM。这是集合处理中表现最明显。
涉及到each绑定,及集合访问器的一系列方法。
<p data-each-method="methods"><span data-text="method"></span>,</p> <hr/> <ul data-each-el="list"> <li> <span data-text="el.title"></span> <button type="button" data-on-click="remove">移除</button> </li> </ul>
require("avalon,ready", function($) { var $$ = $.MVVM var VM = $$.toViewModel({ methods: ["push","unshift","sort","reverse", "shift","pop","splice","remove","removeAt","erase","clear"], list:[{ title:"aaa" }, { title:"bbb" }, { title:"ccc" }, { title:"ddd" } ] }); VM.remove = function(e){ VM.list.erase(e && e.target) } $$.render(VM) setTimeout(function(){ VM.list.push({ title:"push" }) },1000) setTimeout(function(){ VM.list.unshift({ title:"unshift" }) },1500) setTimeout(function(){ VM.list.splice(1,3,{ title:"1111" },{ title:"2222" },{ title:"3333" }) },2000) setTimeout(function(){ VM.list.reverse() },2500) })
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年