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

            })

示例

,

---

• 移除