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
<link rel="stylesheet" href="http://csdnimg.cn/release/phoenix/production/markdown_views-0bc64ada25.css">
</div>
