avalon2

Version:
an elegant efficient express mvvm framework
61 lines (55 loc) • 1.89 kB
HTML
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../../dist/avalon.js"></script>
        <script type="text/javascript" src="//cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
        <style>
            .ani{
                width:100px;
                height:100px;
                background: #ff6e6e;
            }
        </style>
        <script >
            avalon.component('ms-button', {
                template: '<button type="button"><span><slot name="buttonText"></slot></span></button>',
                defaults: {
                    buttonText: "button"
                },
                soleSlot: 'buttonText'
            })
          
                avalon.effect('zoom', {
                    enter: function (el, done) {

                        $(el).css({width: 0, height: 0}).animate({
                            width: 100, height: 100
                        }, 1000, done)
                    },
                    leave: function (el, done) {
                        $(el).animate({
                            width: 0, height: 0
                        }, 1000, done)
                    }
                })
           

            var vm = avalon.define({
                $id: "test",
                arr: [1, 2, 3],
                aaa: 222,
                toggle: true,
                click: function () {
                    this.toggle = !this.toggle;
                }
            })

        </script>

    </head>
    <body ms-controller="test" >
        <div ms-for="el in @arr">
            <xmp class='ani'
                 ms-if="@toggle"
                 ms-widget='{is:"ms-button"}'
                 ms-effect="{is:'zoom'}">{{@aaa}}</xmp>
        </div>
        <button  ms-on-click="@toggle = !@toggle " >点我 </button>
    </body>
</html>