examples/test1.html

<!DOCTYPE html>
<html>
    <head>
        <title>avalon入门</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!--        <script src="avalon.$events.js" type="text/javascript"></script>-->
        <script src="../avalon.js" type="text/javascript"></script>
        <script src="../mobile/mobile.js" type="text/javascript"></script>
        <script>
            var first = 0;
            var model = avalon.define("test", function(vm) {
                vm.firstName = "司徒"
                vm.lastName = "正美"
                vm.fullName = {//一个包含set或get的对象会被当成PropertyDescriptor，
                    set: function(val) {//里面必须用this指向scope，不能使用scope
                        var array = (val || "").split(" ");
                        this.firstName = array[0] || "";
                        this.lastName = array[1] || "";
                    },
                    get: function() {
                        return this.firstName + " " + this.lastName;
                    }
                }
                vm.color = "red"
                vm.toggle = true
                vm.changeToggle = function() {
                    model.toggle = !model.toggle
                }
                vm.v = "111111111111"
                vm.switchColor = function() {
                    model.color = model.color === "red" ? "blue" : "red"
                }
                vm.html = '<strong>正美</strong>'
                vm.arr = ["aaa", 'bbb', "ccc", "ddd"]
                vm.sort = function() {
                    vm.arr.reverse()
                }
                vm.selected = ["bbb", "ccc"]
                vm.checkAllbool = false
                vm.checkAll = function() {
                    if (!first) {
                        first++
                        return
                    }
                    if (this.checked) {
                        vm.selected = vm.arr
                    } else {
                        vm.selected.clear()
                    }
                }
                vm.checkOne = function() {
                    var bool = this.checked
                    if (!bool) {
                        vm.checkAllbool = false
                    } else {
                        vm.checkAllbool = vm.selected.size() === vm.arr.size()
                    }
                }
            })

            setTimeout(function() {
                avalon.log(model.hasOwnProperty("fullName"))
            })
            setTimeout(function() {
                model.html = "<em>aaa</em>bbb<em>dddd</em>"
            }, 1000)
            setTimeout(function() {
                model.html = "1111<em>aaa</em>bbb<em>dddd</em>222"
            }, 1000)


        </script>
        <style>
            .ms-class-test{
                background:green;
                width:300px;
                height:100px;
            }
            .c-red{
                background: red;
            }
            .c-blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div ms-controller="test">
            <input ms-attr-value="v" value="2222222222"/>{{v}}
            <p>First name: <input ms-duplex="firstName" /></p>
            <p>Last name: <input ms-duplex="lastName"  /> {{lastName | html}}</p>
            <p>Hello,    <input ms-duplex="fullName"></p>

            <div>这是显示的内容{{firstName +" | "+ lastName  }}&nbsp;<span style="color:gray">lastName尝试输入&lt;em&gt;test&lt;/em&gt;看看</span></div>
            <ul>
                <li><input type="checkbox" ms-duplex-radio="checkAllbool"  data-duplex-changed="checkAll"/>全选<button ms-click="sort" type="button">sort</button></li>
                <li ms-repeat="arr" ><input type="checkbox" ms-value="el" ms-duplex="selected" data-duplex-changed="checkOne"/>{{el}}  <strong>{{$index}}</strong></li>
            </ul>
            <ol ms-each="arr">
                <li>ms-each {{el}}</li>
            </ol>
            <div class="ms-class-test" ms-hover="c-{{color}}:toggle"> </div>
            <div><button ms-click="switchColor"> 点我改变悬浮时的背景颜色</button>现在悬浮色为{{color}}</div>
            <div><button ms-click="changeToggle"> 点我{{toggle? "禁止": "开启" }}悬浮变色</button></div>
            <div>hello,{{html | html}}!</div>
        </div>

    </body>
</html>