avalon
/
index_each.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>ms-each</title>
        <script src="avalon.js" type="text/javascript"></script>

        <script>
            avalon.define("array", function(vm) {
                vm.array = ["1", "2", "3", "4"]
                vm.del = function() {
                    this.$vmodel.$remove()
                }
                "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".replace(/\w+/g, function(method) {
                    vm[method] = function(e) {
                        vm.array[method]();
                    }
                })
            });
            if (!Date.now) {
                Date.now = function() {
                    return new Date - 0;
                }
            }
            avalon.define('page', function(scope) {
                scope.selected = "name"
                scope.options = ["name", "size", "date"]
                scope.trend = 1
                scope.data = [
                    {name: "aaa", size: 213, date: Date.now() + 20},
                    {name: "bbb", size: 4576, date: new Date - 4},
                    {name: "ccc", size: 563, date: new Date - 7},
                    {name: "eee", size: 3713, date: 9 + Date.now()},
                    {name: "555", size: 389, date: Date.now() - 20}
                ];
                scope.$watch("selected", function(v) {
                    var t = parseFloat(scope.trend)
                    scope.data.sort(function(a, b) {
                        var ret = a[v] > b[v] ? 1 : -1
                        return t * ret
                    })
                })
                scope.$watch("trend", function(t) {
                    var v = scope.selected, t = parseFloat(t)
                    scope.data.sort(function(a, b) {
                        var ret = a[v] > b[v] ? 1 : -1
                        return t * ret
                    })
                })
            });

        </script>
    </head>
    <body>
        <h3 style="text-align: center">ms-each</h3>

        <fieldset ms-controller="array">
            <legend>示例一</legend>
            <ul ms-each-el="array">
                <li >数组的第{{$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>当前数组的长度为<span style="color:red">{{array.size()}}</span>，注意 我们无法修改数组length的固有行为，因此它无法同步视图，需要用size方法。</p>
        </fieldset>
        <fieldset ms-controller="page">
            <legend>示例二</legend>
            <p><select ms-each-el="options" ms-duplex="selected">
                    <option>{{el}}</option>
                </select>
                <select ms-duplex="trend">
                    <option value="1">up</option>
                    <option value="-1">down</option>
                </select>
            </p>
            <table width="500px" border="1">
                <tbody ms-each-el="data">
                    <tr>
                        <td>{{el.name}}</td> <td>{{el.size}}</td> <td>{{el.date}}</td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
    </body>
</html>