- 可以包裹任意大小的html
- 变量在其包裹的任意区域都有效
- 单个变量可以和数组分开展示
- 最好放置在最下方执行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"
]
};
AI 代码解读
区域div
<div id="info_area"></div>
AI 代码解读
包裹区域
<script id="goodstmpl" type="text/x-dot-template">
...
</script>
AI 代码解读
单个变量使用
<div class="aui-title">{{= it.name}}</div>
AI 代码解读
变量中数组使用
方式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>
{{ } }}
AI 代码解读
方式2
{{~ it.goods_img:v}}
<div class="swiper-slide li">
<a href="javascript:;">
<img src="{{= v }}"
data-img="{{= v }}">
</a>
</div>
{{~}}
AI 代码解读
方式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>
{{ } }}
AI 代码解读
JS处理
var interText = doT.template($("#goodstmpl").text());
$("#info_area").html(interText(data));
AI 代码解读
本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/5949852.html，如需转载请自行联系原作者
