template.js 一款 JavaScript 模板引擎，简单，好用。提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。
简介
主要的用途就是，在写好的模板上，放进数据，生成含有数据的html代码。一个超快的前端模板引擎。使用一个type="text/html"的script标签存放模板
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
</script>
var data = {
title: '标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
模板语法
有两个版本的模板语法可以选择。简洁语法 和 原生语法
{{if admin}}
{{include 'admin_content'}}
{{each list}}
<div>{{$index}}. {{$value.user}}</div>
{{/each}}
{{/if}}
<%if (admin){%>
<%include('admin_content')%>
<%for (var i=0;i<list.length;i++) {%>
<div><%=i%>. <%=list[i].user%></div>
<%}%>
<%}%>
方法
template(id, data)
根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。如果没有 data 参数，那么将返回一渲染函数。
template.compile(source, options)
将返回一个渲染函数
var source = '<ul>'
'{{each list as value i}}'
'<li>索引 {{i + 1}} ：{{value}}</li>'
'{{/each}}'
'</ul>';
var render = template.compile(source);
var html = render({
list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
document.getElementById('content').innerHTML = html;
template.render(source, options)
将返回渲染结果。
template.helper(name, callback)
添加辅助方法。
template.config(name, value)
更改引擎的默认配置。
字段 类型 默认值 说明
openTag String '{{' 逻辑语法开始标签
closeTag String "}}" 逻辑语法结束标签
escape Boolean true 是否编码输出 HTML 字符
cache Boolean true 是否开启缓存（依赖 options 的 filename 字段）
compress Boolean false 是否压缩 HTML 多余空白字符
使用预编译
include可嵌套子模板。
//将id为list的模板包含进来
{{include 'list'}}
转义
//只需要加上“＃”号，模板默认就不转义啦。
<div id="content"></div>
<script id="test" type="text/html">
<p>不转义：{{#value}}</p>
<p>默认转义： {{value}}</p>
</script>
var data = {
value: '<span style="color:#F00">hello world!</span>'
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
在页面上打印你的数据。
<script id="test" type="text/html">
{{print a b c}}
</script>
var html = '';
var data = {
a: 'hello',
b: '--world',
c: '--!!!'
};
html = template('test', data);
document.write(html);
另一个更快的 doT.js模板引擎
模板是 ：text/x-dot-template类型脚本
使用方法：
插值 {{=}}
<div id="interpolation"</div>
<script id="interpolationtmpl" type="text/x-dot-template">
<div>Hi {{=it.name}}! </div>
<div>{{=it.age || ''}}</div>
</script>
<script type="text/javascript">
var dataInter = { "name": "Jake", "age": 31 };
var interText = doT.template($("#interpolationtmpl").text());
$("#interpolation").html(interText(dataInter));
</script>
for evaluation for in 循环 {{}} 赋值
<div id="evaluation"></div>
<script id="evaluationtmpl" type="text/x-dot-template">
{{ for(var prop in it) { }}
<div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>
{{ } }}
</script>
for array iteration 数组 {{~ }}数组遍历
<div id="arrays"></div>
<script id="arraystmpl" type="text/x-dot-template">
{{~it.array:value:index}}
<div>{{= index+1 }}{{= value }}!</div>
{{~}}
</script>
<script type="text/javascript">
var dataArr = {"array":["banana","apple","orange"]};
var arrText = doT.template($("#arraystmpl").text());
$("#arrays").html(arrText(dataArr));
</script>
for conditionals 条件 {{? }}
// {{? }} if
// {{?? }} else if
// {{??}} else
<div id="condition"></div>
<script id="conditiontmpl" type="text/x-dot-template">
{{? !it.name }}
<div>Oh, I love your name, {{=it.name}}!</div>
{{?? !it.age === 0}}
<div>Guess nobody named you yet!</div>
{{??}}
You are {{=it.age}} and still dont have a name?
{{?}}
</script>
编码 {{!it.uri}}
<script id="interpolationtmpl" type="text/x-dot-template">
Visit {{!it.uri}} {{!it.html}}
</script>
{{#}} 自定义编译
<div id="part"></div>
<script id="parttmpl" type="text/x-dot-template">
{{##def.snippet:
<div>{{=it.name}}</div>{{#def.joke}}
#}}
{{#def.snippet}}
{{=it.html}}
</script>
var dataPart = {"name":"Jake","age":31,"html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
var defPart = {"joke":"<div>{{=it.name}} who?</div>"};
var partText = doT.template($("#parttmpl").text(), undefined, defPart);
$("#part").html(partText(dataPart));