template.js是一款JavaScript模板引擎,提供一套模板语法,简单好用,开发者可以写一个模板区块,每次传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。官网:简洁语法版/aui/art-template/wiki/syntax:simple
一.引用js
下载artTemplate后,找到template.js引入到页面。
<script src="../dist/template.js"></script>
二.基本使用方法
1.第一种使用方法
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>template基本使用</title><script src="../dist/template.js"></script></head><body><div id="content"></div><script id="test" type="text/html">//{{if}}{{/if}}用来判断 {{each}}{{/each}}循环{{if isAdmin}} <h1>{{title}}</h1><ul>{{each list as value i}}<li>索引 {{i + 1}} :{{value}}</li>{{/each}}</ul> {{/if}}</script><script>var data = {title: 'template基本使用例子',isAdmin: true,list: ['博客', '学院', '下载', '图文课', '论坛', 'APP', '问答','商城']};var thtml = template('test', data);document.getElementById('content').innerHTML = html;//或者 $('#content').empty().append(thtml).show();</script></body></html>
效果:
template基本使用例子• 索引1 :博客• 索引2 :学院• 索引3 :下载• 索引4 :图文课• 索引5 :论坛• 索引6 :APP• 索引7 :问答• 索引8 :商城
2.第二种使用方法(引用模板)
2.1 在项目文件夹中新建template文件夹,把所需要的各种模板单独放入对应的html里面
2.2 模板页代码(2.1中listTemplate.html)
{{if isAdmin}} <h1>{{title}}</h1><ul>{{each list as value i}}<li> 索引 {{i + 1}} :{{value}}</li>{{/each}}</ul> {{/if}}
2.3 使用ajax中的get方法对html进行模板替换
<script>var obj = {title: '模板页获取例子',isAdmin: true,list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']};//var listData = obj.list;var thtml = $.get('template/listTemplate.html',function(data) {var render = pile(data);//$('#content').empty().append(render(listData));$('#content').empty().append(render(obj));});//或者//var thtml = $.get('template/listTemplate.html',function (data) {// var render = pile(data);// var str = render(obj);// document.getElementById('content').innerHTML = str;//});</script>
2.4 模板中内嵌模板
<li><button class="btn-contribution"type="{{$value.type}}"anchor_id="{{$value.pfid}}"><span class="btn-title">貢獻榜</span><span class="top-user-groups">{{include 'top3Template' $value.top3}}</span></button></li>//top3Template模板直接写在主html里面<!--top3子模板-->{{each}}<span class="top-user top-{{$index+1}}"><img src="{{$value.headimg}}" pfid="{{$value.pfid}}" alt=""></span>{{/each}}
总结:
先使用jquery的get方法获取模板页,然后再利用pile()获取渲染内容,然后将数据obj渲染进去,最后添加到页面里即可。
注意:这时候就不能使用template()方法进行模板替换了,必须使用pile()及render()进行模板替换才行。