art-template 模板引擎遍历
接口返回的json字符串如下:
{"data":[{"image_url":"http:\/\/ybtestshop.gouwanmei.wang\/..\/..\/..\/public\/file\/ad\/20181229154507hall.png"},{"image_url":"http:\/\/ybtestshop.gouwanmei.wang\/..\/..\/..\/public\/file\/ad\/20181229154606hall1.png"},{"image_url":"http:\/\/ybtestshop.gouwanmei.wang\/..\/..\/..\/public\/file\/ad\/20181229154645hall2.png"},{"image_url":"http:\/\/ybtestshop.gouwanmei.wang\/..\/..\/..\/public\/file\/ad\/20181229154708hall3.png"},{"image_url":"http:\/\/ybtestshop.gouwanmei.wang\/..\/..\/..\/public\/file\/ad\/20181229154757hall4.png"},{"image_url":"http:\/\/ybtestshop.gouwanmei.wang\/..\/..\/..\/public\/file\/ad\/20181229154823hall5.png"}],"msg":"\u4e2d\u90e8\u5e7f\u544a\u56fe","code":"1"} |
模板:
<script type="text/html" id="imgAdList"> {{each data}} <div class="col-sm-12 col-xs-12"> <a class="sc-gPEVay jZmIRd" href=""><img src="{{$value.image_url}}" alt=""></a> </div> {{/each}} </script> |
渲染:
$.ajax({ type:"post", url:"http://ybtestshop.gouwanmei.wang/home/index/imgAdList", dataType:"json", success:function(data){ var html = template("imgAdList",data); var divResult = document.querySelector("#imgAdListbox"); divResult.innerHTML = html; }, }); |
art-template官网:
http://aui.github.io/art-template/zh-cn/