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>