1.数据结构

var goods = [
        {
            "id": "1",
            "name": "衣服",
            "goods": [
                {
                    "goods_id": "1",
                    "name": "衣服1",
                    "price": "100",
                    "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                },
                {
                    "goods_id": "2",
                    "name": "衣服2",
                    "price": "200",
                    "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                }
            ]
        },
        {
            "id": "2",
            "name": "鞋子",
            "goods": [
                {
                    "goods_id": "3",
                    "name": "鞋子1",
                    "price": "100",
                    "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                },
                {
                    "goods_id": "4",
                    "name": "鞋子2",
                    "price": "200",
                    "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                }
            ]
        }
    ];

2.区域与页面构建

    <div id="category-goods"></div>
    <!-- 必须加上type="text/x-dot-template" -->
    <script id="category-goods-tmpl" type="text/x-dot-template">
        {{ for(var i=0, catlen=it.length; i<catlen; i++) { }}
            <div class="rxsp">
                <div class="aui-pull-left"><h3> {{= it[i].name }} </h3></div>
                <a class="aui-pull-right ">
                    查看更多
                    <span class="aui-iconfont aui-icon-right"></span>
                </a>
            </div>

            <div class="aui-list-item-inner">
                <div class="aui-row aui-row-padded">
                    {{ for(var j=0, goodslen=it[i]['goods'].length; j<goodslen; j++) { }}    
                    <div class="aui-col-xs-6">
                        <img src="{{= it[i]['goods'][j].logoimg }}" onclick="openWin('goods_detail')">
                        <p class="tit">{{= it[i]['goods'][j].name }} </p>
                        <div class="aui-info" style="padding-top:0">
                            <div class="aui-info-item">
                                <span class="red">￥{{= it[i]['goods'][j].price }}<!-- <span class="jifen"> 积分1000</span></span> -->
                            </div>
                        </div>
                    </div>
                    {{ } }}
                </div>
            </div>
        {{ } }}
    </script>

3.调用数据

    var goods = [
        {
            "id": "1",
            "name": "衣服",
            "goods": [
                {
                    "goods_id": "1",
                    "name": "衣服1",
                    "price": "100",
                    "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                },
                {
                    "goods_id": "2",
                    "name": "衣服2",
                    "price": "200",
                    "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                }
            ]
        },
        {
            "id": "2",
            "name": "鞋子",
            "goods": [
                {
                    "goods_id": "3",
                    "name": "鞋子1",
                    "price": "100",
                    "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                },
                {
                    "goods_id": "4",
                    "name": "鞋子2",
                    "price": "200",
                    "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                }
            ]
        }
    ];

    var evalText = doT.template($("#category-goods-tmpl").text());
    $("#category-goods").html(evalText(goods));

4.结果展示

调整结构

var goods_list = {
        "list": [
            {
                "id": "1",
                "name": "衣服",
                "goods": [
                    {
                        "goods_id": "1",
                        "name": "衣服1",
                        "price": "100",
                        "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                    },
                    {
                        "goods_id": "2",
                        "name": "衣服2",
                        "price": "200",
                        "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                    }
                ]
            },
            {
                "id": "2",
                "name": "鞋子",
                "goods": [
                    {
                        "goods_id": "3",
                        "name": "鞋子1",
                        "price": "100",
                        "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                    },
                    {
                        "goods_id": "4",
                        "name": "鞋子2",
                        "price": "200",
                        "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                    }
                ]
            }
        ]
    };

这种结构适用于arttemplate，便于统一结构。
doT中相应调整，

    var evalText = doT.template($("#category-goods-tmpl").text());
    $("#category-goods").html(evalText(goods_list.list));



本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/5946161.html，如需转载请自行联系原作者