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) })示例
,
- 移除