js模板（template.js）实现循环渲染列表

最新推荐文章于 2025-02-10 15:25:43 发布

原创最新推荐文章于 2025-02-10 15:25:43 发布 · 8k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#template.js #前端 #模板

前端专栏收录该内容

28 篇文章

订阅专栏

本文介绍如何使用template.js模板引擎，通过JSON数据渲染列表。首先引入模板文件，然后定义HTML模板，最后用JavaScript将数据填充到模板中，实现动态渲染。

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

实现效果：我们希望通过一串json数据来进行渲染出数量等于json长度的列表。

一、引入模板文件

<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数据
    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>

注：个人笔记，不喜勿喷。