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

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

 

在页头导入模板文件

1 <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数据，也可以是通过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>

 

转载于:https://www.cnblogs.com/dongxixi/p/11010620.html