template.js是由纯JavaScript编写的第三方模板引擎。点击https://github.com/yanhaijing/template.js可进行下载。
在页头导入模板文件
1 <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>