JS中art-template模板使用循环嵌套

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/PrisonersDilemma/article/details/89973897

用到了jQuery。

JS代码：

// json数据
var json=[
   {
     "ad_img": "http://dummyimage.com/1180x240/79f28b/f27989.png&text=广告图",
     "good": [
       {"good_img": "http://dummyimage.com/690x660/f2a979/8679f2.png&text=商品图"},
       {"good_img": "http://dummyimage.com/690x660/8ff279/f279b2.png&text=商品图"},
     ]
   },
   {
     "ad_img": "http://dummyimage.com/1180x240/79d5f2/f2eb79.png&text=广告图",
     "good": [
       {"good_img": "http://dummyimage.com/690x660/c879f2/79f2a4.png&text=商品图"},
       {"good_img": "http://dummyimage.com/690x660/79f2e6/f2c279.png&text=商品图"}
     ]
   }
]
// 渲染json
$("#container").html(template("indexmain",json));

HTML代码：

<div id="container"></div>

<script type="text/html" id="indexmain">
	{{each list item}}
	<section>
		<!-- 商品广告 -->
		<a href="javascript:;">
			<img src="{{item.ad_img}}" alt="广告图">
		</a>
		<!-- 商品列表 -->
		<ul>
			{{each item.good item2}}
			<li>
				<a href="javascript:;">
					<img src="{{item2.good_img}}" alt="商品图">
				</a>
			</li>
			{{/each}}
		</ul>
	</section>
	{{/each}}
</script>	

效果图：