avalonjs 复选框

1>复选卡框

监控已选框的数组，即通过属性监控来判断是否全选

    <div ms-controller="test">
            <ul>
                <li>{{isAllChecked}}全选
                    <input type="checkbox" ms-attr-checked="isAllChecked" ms-click="checkAll" />
                </li>
                <li ms-repeat="arr">{{el}}<input type="checkbox" ms-attr-value="el" ms-duplex="selected" /></li>
            </ul>
        </div>
        <script src="avalon.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var vm = avalon.define({
                $id: "test",
                arr: ["1", "2", "3", "4", "5"],
                selected: ["1", "5"],
                isAllChecked: false,
                checkAll: function () {
                    if (this.checked) {
                        vm.selected = vm.arr;
                    } else {
                        vm.selected.clear();
                    }
                }
            });

            vm.isAllChecked = vm.selected.length == vm.arr.length;

            vm.selected.$watch("length", function (n) {
                vm.isAllChecked = n === vm.arr.length;
            });

        </script>

单选的click事件触发的时候来判断是否全选。

    <div ms-controller="test">
            <ul>
                <li>{{isAllChecked}}全选
                    <input type="checkbox" ms-attr-checked="isAllChecked" ms-click="checkAll" />
                </li>
                <li ms-repeat="arr">{{el}}<input type="checkbox" ms-attr-value="el" ms-click="check"
                    ms-duplex="selected" /></li>
            </ul>
        </div>
        <script src="avalon.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var vm = avalon.define({
                $id: "test",
                arr: ["1", "2", "3", "4", "5"],
                selected: ["1", "5"],
                isAllChecked: false,
                checkAll: function () {
                    if (this.checked) {
                        vm.selected = vm.arr;
                    } else {
                        vm.selected.clear();
                    }
                    vm.isAllChecked = this.checked;
                },
                check: function () {
                    vm.isAllChecked = vm.selected.length === vm.arr.length;
                }
            });
        </script>

2>下拉框

   <div ms-controller="test">
            {{selectedVal}}
            <select ms-each="arr" ms-duplex="selectedVal">
                <option ms-attr-value="el.val">{{el.key}}</option>
            </select>
        </div>
        <script src="avalon.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var vm = avalon.define({
                $id: "test",
                arr: [{ key: "是", val: "1" }, { key: "否", val: "0"}],
                selectedVal: "0"
            });
        </script>

3>格式化

{{ new Date | date("yyyy-MM-dd:HH:mm:ss")}}

{{ "2011-07-08" | date("yyyy-MM-dd HH:mm:ss")}}

{{ "2011 07" | date("yyyy-MM-dd HH:mm:ss")}}

4>循环绑定

1. el: 不一定叫这个名字，比如说ms-each-item，它就变成conitem了。默认为el。指向当前元素。
2. $first: 判定是否为监控数组的第一个元素
3. $last: 判定是否为监控数组的最后一个元素
4. $index: 得到当前元素的索引值
5. $outer: 得到外围循环的那个元素。
6. $remove：这是一个方法，用于移除此元素

 5>作用域绑定(ms-controller, ms-important)

ms-controller：如果当前ViewModel没有此字段 就找上一级ViewModel的同名字段

ms-important：强制这个区域使用此ViewModel，不再往上查找同名属性或方法

 <div ms-controller="AAA">
            <div>
              ms-controller属性：  有color{{name}} : {{color}}</div>
            <div ms-controller="BBB">
                <div>
                   ms-controller属性： 有color {{name}} : {{color}}</div>
                <div ms-controller="CCC">
                    <div>
                     ms-controller属性：   无color {{name}} : {{color}}</div>
                </div>
                <div ms-important="DDD">
                    <div>
                     ms-important属性：   无color {{name}} : {{color}}</div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            avalon.define({
                $id: "AAA",
                name: "1_liger",
                color: "1_green"
            });
            avalon.define({
                $id: "BBB",
                name: "2_sphinx",
                color: "2_red"
            });
            avalon.define({
                $id: "CCC",
                name: "31_dragon" //不存在color
            });
            avalon.define({
                $id: "DDD",
                name: "32_sirenia" //不存在color
            });
        </script>

 6>计算属性

计算属性：定义时为一个对象，并且只存在set,get两个函数或只有一个get函数。它是监控属性的高级形式，表示它的值是通过函数计算出来的，是依赖于其他属性合成出来的。

      <div ms-controller="test">
            firstName:
            <input type="text" ms-duplex="firstName" /><br />
            lastName:
            <input type="text" ms-duplex="lastName" /><br />
            fullName：<input type="text" ms-duplex="fullName" />
        </div>
        <script src="avalon.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            avalon.define({
                $id: "test",
                firstName: "firstName",
                lastName: "lastName",
                fullName: {
                    set: function (val) {
                        var valArr = val.split(‘ ‘);
                        this.firstName = valArr[0];
                        if (valArr[1] == undefined) {
                            this.lastName = "";
                        } else {
                            this.lastName = val.split(‘ ‘)[1];
                        }
                    },
                    get: function () {
                        return this.firstName + " " + this.lastName;
                    }
                }
            });
        </script>