js 拼接是一件很麻煩的事,今天就教大家用模板引擎arttemplate來做迴圈巢狀
阿新 • • 發佈:2019-02-07
這是資料結構
{ "code": 0, "msg": "成功", "data": { "pageNum": 1, "pageSize": 10, "size": 10, "orderBy": null, "startRow": 1, "endRow": 10, "total": 66, "pages": 7, "list": [ { "id": "93307d9f-325a-4314-a87d-701047ce2b9f", "payType": 3, "payTradeNo": null, "payStatus": 1, "expId": null, "expNo": null, "expFee": null, "expStatus": null, "expTime": null, "addrConsignee": "name", "addrZipcode": "551600", "addrArea": "貴州 貴陽市 雲巖區", "addrDetail": "貴州省貴陽市雲巖區紅星城市廣場", "addrMobile": "15700104801", "status": 1, "payAmount": 456, "orderAmount": 456, "couponAmount": 0, "pointAmount": 0, "addTime": 1515028603000, "msg": null, "orderGoodsList": [ { "goodsDetailId": "2", "title": "白米醋 陳醋香醋餃", "imgUrl": "http://zh-imageserver.oss-cn-shenzhen.aliyuncs.com/201709211835322058.png", "price": 456, "amount": 456, "count": 1, "specDesc": "總酸(以乙酸計), g/100ml ≥ 3.50", "couponAmount": 12, "rewardPoint": 12, "activeType": 0, "activeNo": null } ] } } }
這是html
<div class="order-list" id="content"></div>
獲取資料模板語法//列表 var loadMore = function (callback) { $.ajax({ url:'', type: 'get', contentType: 'application/json', success: function (response) { var data = response.data; var list = data.list; typeof callback == 'function' && callback(list); } }); }; // 呼叫模板載入資料 loadMore(function (listArr) { var html = template('ordertest', { list: listArr }); $('.order-list').append(html); }); })
基本就是這樣,這是一個例子 ,沒有給大家講解,但是看看會懂的<!-- //模板引擎 --> <script type="text/html" id="ordertest"> {{each list as value }} <div class="order-list-item"> <h1> <span class="orderTime">{{value.addTime | dateFormat:'yyyy-MM-dd h:m:s'}}</span> {{if value.status==1}} <strong float-right>未支付</strong> {{/if}} {{if value.status==2}} <strong float-right>待發貨</strong> {{/if}} </h1> <div class="list"> {{include 'orderlist' value}} </div> <div class="order-id"> <p> 訂單號:{{value.id}} </p> <p> 訂單合計:¥ <span>{{value.payAmount}}</span> </p> </div> </div> {{/each}} </script> <!-- 子模板引擎 --> <script type="text/html" id="orderlist"> {{each orderGoodsList as value}} <article class="m-list list-theme4"> <a href="order-detail.html" class="list-item"> <div class="list-img"> <img src="{{value.imgUrl}}" alt="" /> </div> <div class="list-mes"> <h3 class="list-title">{{value.title}}</h3> <div class="list-mes-item"> <div> <span class="list-price"> <em>¥</em>{{value.price}}</span> </div> <div>x{{value.count}}</div> </div> </div> </a> </article> {{/each}} </script>