js模板（template.js）实现页面动态渲染

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

在页头导入模板文件

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

以下例子实现用template渲染动态列表

<!--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数据，也可以是通过ajax从后台拿到的数据
    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>