1. 程式人生 > >js 拼接是一件很麻煩的事,今天就教大家用模板引擎arttemplate來做迴圈巢狀

js 拼接是一件很麻煩的事,今天就教大家用模板引擎arttemplate來做迴圈巢狀

這是資料結構

{
  "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>
基本就是這樣,這是一個例子 ,沒有給大家講解,但是看看會懂的