Ruby's Louvre

每天学习一点点算法

导航

chrome36可以使用自定义元素的回调了 

<!DOCTYPE html>
<html>
    <head>
        <title>ms-attr-*</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"></script>

        <script>
            avalon.define("test", function(vm) {
                vm.toggle = true
                vm.aaa = "aaa"
                vm.click = function() {
                    vm.toggle = !vm.toggle
                    console.log(vm.toggle)
                }
                vm.change = function() {
                    vm.aaa = "bbb"
                }
            })
            var XBooPrototype = Object.create(HTMLElement.prototype);

            XBooPrototype.detachedCallback = function() {
                console.log("remove")
            }
            XBooPrototype.attachedCallback = function() {
                console.log("add")
            }
            var XBoo = document.registerElement('x-boo-ir2', {
                prototype: XBooPrototype
            });
       
            window.onload = function() {
                var xboo = new XBoo()
                var body = document.body
                body.appendChild(xboo);

                body.removeChild(xboo);
            }

        </script>
        <style>
            .aaa {
                background: goldenrod;
            }
            .bbb{
                background: green;
            }
        </style>

    </head>
    <body ms-controller="test">

        <div ms-hover="{{aaa}}:toggle" ms-click="click">ddddd</div>
        <button ms-click="change">点我</button>
    </body>
</html>

posted on 2014-09-02 22:16  司徒正美  阅读(1018)  评论(2)    收藏  举报