站内导航
新闻
影视
游戏
小说
旅游
购物
体育
avalon组件实例
2017/06/21    标签： avalon组件   

avalon组件模板template只允许又一个顶层标签

<!DOCTYPE html>
<html>
    <head>
        <title>ms-if</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style type="text/css" media="screen">
            .ms-controller{
                visibility:hidden;
            }
        </style>
   </head>
    <body>
        <div ms-controller='test' class="ms-controller">
            <xmp ms-widget="{is:'ms-button',url:'https://api.github.com/search/repositories?q=javascript&sort=stars'}"></xmp>
        </div>
        <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/avalon.js/2.2.7/avalon.min.js"></script>
        <script>
            avalon.component('ms-button', {
                template: '<div><button ms-on-click="@loading">加载</button><ol>'
                +'<!--ms-for: el in @items-->'
                +'<li>{{el.url}}</li>'
                +'<!--ms-for-end:--></ol></div>',
                defaults: {
                    url:'',
                    items:[],
                    loading:function($event){
                        var that=this;
                        $.get(this.url,function(data){
                            for(var x in data.items){
                                if(data.items[x].homepage==null){data.items[x].homepage=''};
                                if(data.items[x].mirror_url==null){data.items[x].mirror_url=''};
                                that.items.push(data.items[x])
                            }
                        });
                    },
                    onReady:function($event){
                        //渲染完毕执行
                    }
                }
            })

            avalon.define({
                $id:"test"
            });
        </script>
    </body>
</html>


上一篇:
下一篇:

静水缘首页

刘丕水+宋静静=静水刘丕水+宋静静于2007年9月相识于山东理 工大学，毕业后2011年相恋，共甘苦，历 时四年，终于在11月23号拿到了红本本， 组建了自己的小家庭......
快速发布

文章分类

最新文章