avalon.live.html

<!DOCTYPE html>
<html>
    <head>
        <title>ms-live</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            .red { color:#f00; }
        </style>
    </head>
    <body >
        <div ms-controller="model">
            <div ms-html="aaa" ms-live-click="live"></div>
            <ul ms-each="array">
                <li ms-live-click="getIndex">{{$index}}</li>
            </ul>
            <input ms-live-focus="focus" ms-live-blur="blur" />
            <input type="radio" name="aaa"  ms-live-change="check" value="111"/><input  ms-live-change="check" type="radio" name="aaa" value="222"/>
            <input  ms-live-change="check" value="xxxx"/> <input  ms-live-change="check" value="xxxx" type="password"/>
            <textarea ms-live-change="check">dddd</textarea>
            <select ms-live-change="check">
                <option>1111</option>
                <option>2222</option>
                <option>3333</option>
            </select>
            <select ms-live-change="check" multiple>
                <option>1111</option>
                <option>2222</option>
                <option>3333</option>
            </select>
            <div>{{show}}</div>
        </div> 

        <script src="avalon.js" type="text/javascript"></script>
        <script>
            require("avalon.live", function() {
                var model = avalon.define("model", function(vm) {
                    vm.aaa = "<b>ddd</b>"
                    vm.live = function(e) {
                        avalon.log(this)
                        avalon.log(e.target)
                    }
                    vm.array = ["a", "b", "c", "d"]
                    vm.show = ""
                    vm.getIndex = function() {
                        vm.show = this.innerHTML
                    }
                    vm.focus = function(e) {
                        vm.show = e.type 
                    }
                    vm.check = function(e) {
                        vm.show = e.type + " " + avalon(this).val()
                    }
                    vm.blur = function(e) {
                        vm.show = e.type 
                    }
                });
                setTimeout(function() {
                    model.aaa = "<em>dddd</em>"
                }, 3000)
                setTimeout(function() {
                    model.aaa = "<em>3333</em>"
                }, 4000)
                avalon.scan()
            })


        </script> 
    </body>
</html>