doT.js變量和數組混合讀取方式

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));

小結

很好用~