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



            })

示例

,

---

• 移除