examples/repeat3.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>ms-repeat</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <script src="../avalon.js" ></script>
        <script>
            avalon.define("test", function(vm) {//这里是使用avalon.define的旧风格
                vm.array = ["1", "2", "3", "4"]
                "push,unshift,remove,ensure".replace(/\w+/g, function(method) {
                    vm[method] = function(e) {
                        if (this.value && e.which == 13) {//this为input元素
                            vm.array[method](this.value);
                            this.value = "";
                        }
                    }
                })

                vm.removeAt = function(e) {
                    if (isFinite(this.value) && e.which == 13) {//this为input元素
                        var a = ~~this.value
                        vm.array.removeAt(a)
                        this.value = "";
                    }
                }
                "pop,shift,sort,reverse,clear".replace(/\w+/g, function(method) {
                    vm[method] = function(e) {
                        vm.array[method]();
                    }
                })
            });


        </script>
    </head>
    <body ms-controller="test">
        <p>监控数组拥有以下方法，我们可以操作它们就能同步对应的区域</p>
        <blockquote>
            push, shift, unshift, pop, slice, splice, remove, removeAt, removeAll, clear, ensure, sort, reverse, set
        </blockquote>
        <ul>
            <li  ms-repeat="array">数组的第{{$index+1}}个元素为{{el}}</li>
        </ul>
        <p>对数组进行push操作，并回车<input ms-keypress="push"></p>
        <p>对数组进行unshift操作，并回车<input ms-keypress="unshift"></p>
        <p>对数组进行ensure操作，并回车<input ms-keypress="ensure"><br/>
            (只有数组不存在此元素才push进去)</p>
        <p>对数组进行remove操作，并回车<input ms-keypress="remove"></p>
        <p>对数组进行removeAt操作，并回车<input ms-keypress="removeAt"></p>
        <p><button type="button" ms-click="sort">对数组进行sort操作</button></p>
        <p><button type="button" ms-click="reverse">对数组进行reverse操作</button></p>
        <p><button type="button" ms-click="shift">对数组进行shift操作</button></p>
        <p><button type="button" ms-click="pop">对数组进行pop操作</button></p>
        <p><button type="button" ms-click="clear">对数组进行clear操作</button></p>

        <p>当前数组的长度为<span style="color:red">{{array.size()}}</span>，注意 我们无法修改数组length的固有行为，因此它无法同步视图，需要用size方法。</p>


    </body>
</html>