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>