js模板（template.js）实现循环渲染列表

template.js是由纯JavaScript编写的第三方模板引擎。点击https://github.com/yanhaijing/template.js可进行下载。

实现效果：我们希望通过一串json数据来进行渲染出数量等于json长度的列表。

一、引入模板文件

<script src="你的模板文件路径/template.js"></script>

二、实现代码逻辑（主要代码）

<!--template模板渲染位置-->
<div id="templatelist"></div>
			

<script type="text/html" id="template1">
	<ul>
	<% for(var i = 0;i < list.length;i++){ %>
					
		<li>
            <p><%= list[i].name %></p>
            <p><%= list[i].sex %></p>
		</li> 
	    		
	<% } %>
	</ul>
</script>

<script>

    // 准备好的数据源，也可以是通过网络获取的json数据
    var data = [{name:"张三",sex:"女"},{name:"李四",sex:"男"},{name:"王五",sex:"女"}]

    // 模板渲染
	var template1 = document.getElementById('template1').innerHTML;
	document.getElementById('templatelist').innerHTML = template(template1,{list:data});

</script>

三、渲染后的效果应该是：

<ul>
			
    <li>
         <p>张三</p>
         <p>女</p>
	</li> 
    <li>
         <p>李四</p>
         <p>男</p>
	</li> 
    <li>
         <p>王五</p>
         <p>女</p>
    </li> 
</ul>

注：个人笔记，不喜勿喷。