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>

摘自

https://www.cnblogs.com/dongxixi/p/11010620.html

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注