template.js是一款JavaScript模板引擎，提供一套模板语法，简单好用，开发者可以写一个模板区块，每次传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。官网：简洁语法版 https://github.com/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 = template.compile(data);
//$('#content').empty().append(render(listData));
$('#content').empty().append(render(obj));
});
//或者
//var thtml = $.get('template/listTemplate.html',function (data) {
// var render = template.compile(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方法获取模板页，然后再利用template.compile()获取渲染内容，然后将数据obj渲染进去，最后添加到页面里即可。
注意：这时候就不能使用template()方法进行模板替换了，必须使用template.compile()及render()进行模板替换才行。
本文转自 https://blog.csdn.net/weixin_39680839/article/details/83992661，如有侵权，请联系删除。
