標籤:turn 寫法 xxx als type size eal json data
第一次在項目中用laytpl模板,下面是一些使用過程中的探索,希望對小夥伴們有所協助。
註:第一次使用這個模板的小夥伴建議先去看看官網 laytpl
<script type="text/html" id="productList-shop-main1"> //模板內容都要存放在<script>標籤裡 {{# for (var i = 0; i < d.obj.length; i++){ }} //模板裡面的for迴圈跟js一樣的寫法,要寫在{{# }}這裡面 <div class="list-shop product-list-shop" data-id="{{d.obj[i].id}}"> //模板內容裡面的資料要寫在2對大括弧裡面{{ d.資料 }} <div class="list-msg-2 productlist-img"> //模板裡面的資料前面都要加上d,沒有為什麼,文法就這樣 <a title="{{d.obj[i].fullName}}"><img src="{{d.obj[i].imgrealpath_45}}" class="shop-img" data-id="{{d.obj[i].id}}"/></a> </div> <div class="list-msg-3 productlist-msg-3"> <div class="list-main-1"> <div class="productlist-list-main-1-left list-main-1-left product-main-1-left">{{d.obj[i].fullName}}</div> </div> <div class="list-main-3"> <div class="list-main-3-left"><span>¥{{d.obj[i].price}}</span></div> <div class="list-main-3-right"> <ul class="product-btn productlist-btn"> {{# if(d.obj[i].isFavorite == 1){ }} //if else也是js的寫法,也要寫在{{# }}裡面 <li><img class="favorite-icon" src="webpage/weixin/wudeli-weixin/images/list01.png" data-value="{{d.obj[i].isFavorite}}" /></li> {{# }else{ }} //else也要寫在{{# }} <li><img class="favorite-icon" src="webpage/weixin/wudeli-weixin/images/list1.png" data-value="{{d.obj[i].isFavorite}}" /></li> {{# } }} //結束括弧也要寫在{{# }} <li><img class="index-car-icon" src="webpage/weixin/wudeli-weixin/images/car-chcked01.png" /></li> <li class="product-btn-buy productlist-btn-buy" "><button onclick="productBtn(this);">立即購買</button></li> </ul> </div> </div> </div> </div> {{# } }} //for迴圈結束括弧也要單獨寫在這裡面{{# }}
</script>
上面模板的內容就是紅色框的部分,使用了這個模板以後,就不用再拼字串了。
下面總結了2種寫法:
第一種是模板裡面已經寫了迴圈(比如我上面的模板就已經寫了迴圈),ajax請求裡面就不需要在寫迴圈了,如:
var gettpl = document.getElementById(‘productList-shop-main1‘).innerHTML;
$.ajax({ url: "orderController.do?findTdCodeNews", data: { "billCompanyName":billCompanyName }, type: "post", dataType:"json", success: function (e) { if (!e.success) { alert(e.msg); return false; } laytpl(gettpl).render(e, function(html){ //這裡的gettp1就是擷取到模板內容的id document.getElementById(‘item3-main‘).innerHTML = html; //把擷取到的模板內容添加到id為item3-main的容器裡面 }); } }); }
第二種是,模板裡面沒有寫迴圈,那麼就要在ajax請求裡面寫迴圈,如:
var gettpl = document.getElementById(‘productList-shop-main1‘).innerHTML;
$.ajax({ url: "orderController.do?findTdCodeNews", data: { "billCompanyName":billCompanyName }, type: "post", dataType:"json", success: function (e) { if (!e.success) { alert(e.msg); return false; }
//xxx代表返回結果集的屬性名稱
for(var i = 0; i < e.xxx.length; i++){ laytpl(gettpl).render(xxx[i], function(html){ document.getElementById(‘item3-main‘).innerHTML = html; }); } } }); }
laytpl模板——怎麼使用ajax與資料互動