arttemplate是JavaScript模板引擎，使用时需引入其对应的js文件：

• arttemplate.js 简洁语法版
• arttemplate-native.js 原生语法版

arttemplate有两种语法格式（简洁语法和原生语法），本文记录简介语法的使用。

简单应用

准备工作：下载template.js
使用流程：type=”text/html”的script标签存放模板，js中准备数据并渲染

<!-- 引入简洁语法版js文件-->
<script type="text/javascript" src="arttemplate.js"></script><div id="content"></div>
<!-- 编写模板,此模板放在html页面中,模板也可放在js文件中 -->
<script id="contentTemplate" type="text/html"><h1>{{title}}</h1> <ul> {{each list}}<li>索引 {{$<span class="hljs-variable">index</span> + 1}}</span><span class="xml"><span class="javascript"> ：</span></span><span class="hljs-expression">{{$value}}</li> {{/each}}</ul> </script>
<!-- 渲染模板 -->
<script type="text/javascript">var data = {// 准备模板中涉及的数据title: '标签',list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']};var html = template('contentTemplate', data);// 调用template()方法将模板与数据结合进行渲染document.getElementById('content').innerHTML = html;// 将渲染结果写入div
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

js文件提供的方法

template(id,data)

• 返回渲染结果
• 内部根据document.getElementById(id)查找模板
• 如果没有data参数，返回一个渲染函数

【注】

由于arttemplate的预编译功能，可突破浏览器限制，让前端模板拥有后端模板一样的同步“文件”加载能力：
一、按文件与目录组织模板

template('tpl/home/main', data);

• 1

二、模板支持引入子模板

{{include '../public/header'}}

• 1

template.compile(source,options)

返回一个渲染函数，主要用于模板写在js中

<div id="content"></div>
<!-- 在javascript中存放模板并渲染 -->
<script type="text/javascript">var source = '<ul>' + '{{each list as value i}}' +  '<li>索引 {{i + 1}} ：{{value}}</li>'+ '{{/each}}'+ '</ul>';var render = template.compile(source); // 返回一个渲染函数var data = {list : ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']}var html = render(data);document.getElementById('content').innerHTML = html;
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

template.render(source,options)

返回渲染结果

template.helper(name,callback)

添加辅助方法，即在模板中访问外部公用函数

<div id="content"></div>
<script id="testTemplate" type="text/html">{{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}
</script><script type="text/javascript">/** * 对日期进行格式化， * @param date 要格式化的日期 * @param format 进行格式化的模式字符串 * @return String */template.helper('dateFormat', function (date, format) {date = new Date(date);var map = {"M": date.getMonth() + 1, //月份 "d": date.getDate(), //日 "h": date.getHours(), //小时 "m": date.getMinutes(), //分 "s": date.getSeconds(), //秒 "q": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 };format = format.replace(/([yMdhmsqS])+/g, function(all, t){var v = map[t];if(v !== undefined){if(all.length > 1){v = '0' + v;v = v.substr(v.length-2);}return v;}else if(t === 'y'){return (date.getFullYear() + '').substr(4 - all.length);}return all;});return format;});var data = {time: (new Date).toString(),};var html = template('testTemplate', data);document.getElementById('content').innerHTML = html;
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45

template.config(name,value)

更改引擎的默认配置

模板编写语法

输出表达式

{{content}} <!--内容编码输出，编码可以防止数据中含有 HTML 字符串--><span style="color:#F00">hello world!</span>
{{#content}} <!--内容不编码输出--> hello word!

• 1
• 2

var data = {content: '<span style="color:#F00">hello world!</span>'
};

• 1
• 2
• 3

条件表达式

{{if admin}}<p>admin</p>
{{else if code > 0}}<p>master</p>
{{else}}<p>error!</p>
{{/if}}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

var data = {admin:true
}

• 1
• 2
• 3

遍历表达式

无论数组或者对象都可以用 each 进行遍历

{{each list as value index}}<li>{{index}} - {{value.user}}</li>
{{/each}}
<!--或-->
{{each list}}<li>{{$<span class="hljs-variable">index</span>}}</span><span class="xml"> - </span><span class="hljs-expression">{{$value.user}}</li>
{{/each}}

• 1
• 2
• 3
• 4
• 5
• 6
• 7

嵌入子模板

{{include 'template_name'}} <!--子模板共享当前数据-->
{{include 'template_name' news_list}} <!--子模板指定新数据-->

• 1
• 2