doT.js变量和数组混合读取方式
可以包裹任意大小的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" ] }; 区域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,如需转载请自行联系原作者