1. 可以包裹任意大小的html
2. 变量在其包裹的任意区域都有效
3. 单个变量可以和数组分开展示
4. 最好放置在最下方执行js

数据结构

var data = {
        "id": "1280",
        "name": "漂亮的衣服",
        "price": "100",
        "oprice": "150",
        "goods_img": [
            "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000189/20160718/a/578c97464f436.jpg@1000w",
            "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000189/20160718/d/578c973b1fa40.jpg@1000w",
            "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000189/20160718/6/578c973352e0f.jpg@1000w"
        ]
    };

区域div

<div id="info_area"></div>

包裹区域

<script id="goodstmpl" type="text/x-dot-template">
...
</script>

单个变量使用

<div class="aui-title">{{= it.name}}</div>

变量中数组使用

方式1

{{ for(var prop in it['goods_img']) { }}
<div class="swiper-slide li">
<a href="javascript:;">
    <img src="{{= it['goods_img'][prop] }}"
         data-img="{{= it['goods_img'][prop] }}">
</a>
</div>
{{ } }}

方式2

{{~ it.goods_img:v}}
<div class="swiper-slide li">
    <a href="javascript:;">
        <img src="{{= v }}"
             data-img="{{= v }}">
    </a>
</div>
{{~}}

方式3

{{ for(var prop in it['goods_img']) { }}
{{ var v = it['goods_img'][prop]; }}
<div class="swiper-slide li">
    <a href="javascript:;">
        <img src="{{= v }}"
             data-img="{{= v }}">
    </a>
</div>
{{ } }}

JS处理

var interText = doT.template($("#goodstmpl").text());
$("#info_area").html(interText(data));

小结

很好用~

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