站内导航
新闻
影视
游戏
小说
旅游
购物
体育
avalon学习笔记一
2016/11/30    标签： avalon   

记： 大项目用ng，小项目用vue，中项目用react，如果想兼容ie8及以下浏览器请用司徒正美的avalon

上学习demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="http://cdn.bootcss.com/avalon.js/2.2.1/avalon.min.js"></script>
        <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
    </head>
<body ms-controller="test">
    <script>
        avalon.define({
            $id: 'test',
            pro:[
                {name:'苹果',price:12,num:1},
                {name:'香蕉',price:14,num:0},
                {name:'梨',price:10,num:2},
                {name:'芒果',standard:[{name:'大',price:15,num:1},{name:'中',price:10,num:0},{name:'小',price:6,num:0}]}
                ],
            count:function(){
                var priceAll=0;
                for(var x in this.pro){
                    if(this.pro[x].standard){
                        for(var j in this.pro[x].standard){
                            priceAll+=this.pro[x].standard[j].price*this.pro[x].standard[j].num
                        }
                    }else{
                        priceAll+=this.pro[x].price*this.pro[x].num
                    }
                };
                return priceAll;
            },
            show:function(el){
                return typeof(el.standard)=='undefined';
            },
            merge:function(index){
                if(index==0){
                    return true;
                }else{
                    return false;
                }
            }
        })
$(function(){
    setTimeout(function(){
        $(".test").eq(0).val(10);
    }, 4000)
});
    </script>
    <table>
        <tbody>
        <!--ms-for:el in pro-->
            <tr ms-if="@show(el)">
                <td>{{el.name}}</td><td>价格:<input ms-duplex="@el.price"/>元</td><td>数量:<input ms-duplex="@el.num"></td>
            </tr>
            <!--ms-for:(val,standard) in el.standard-->
            <tr>
            <td ms-attr="{rowspan:el.standard.length}" ms-visible="@merge(val)">{{@el.name}}</td>
            <td>价格:<input ms-duplex="@standard.price"/>元</td><td>数量:<input ms-duplex="@standard.num"></td>
            </tr>
            <!--ms-for-end-->
        <!--ms-for-end-->
        </tbody>
    </table>
    总价:{{@count()}}
</body>
</html>


上一篇:
下一篇:

静水缘首页

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

文章分类

最新文章