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

樣本

,

• 
  移除