<script src="dist/template.js"></script>
下載(https://raw.github.com/aui/artTemplate/master/dist/template.js)
編寫模版
<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}}
9.1、 artTemplate 原生 js 模板語法版
使用
在頁面中引用模板引擎：
<script src="dist/template-native.js"></script>
下載(https://raw.github.com/aui/artTemplate/master/dist/template-native.js)
表達式
<% 與 %> 符號包裹起來的語句則為模板的邏輯表達式。
輸出表達式
對內容編碼輸出：
<%=content%>
不編碼輸出：
<%=#content%>
編碼可以防止數據中含有 HTML 字符串，避免引起 XSS 攻擊。
邏輯
支持使用 js 原生語法
<h1><%=title%></h1>
<ul>
<%for(i = 0; i < list.length; i ++) {%>
<li>條目內容 <%=i + 1%> ：<%=list[i]%></li>
<%}%>
</ul>
模板不能訪問全局對象，公用的方法請參見文檔 輔助方法 章節 模板包含表達式
用於嵌入子模板。
<% include('template_name') %>
子模板默認共享當前數據，亦可以指定數據：
<% include('template_name', news_list) %>
輔助方法
使用template.helper(name, callback)注冊公用輔助方法，例如一個基本的 UBB 替換方法：
template.helper('$ubb2html', function (content) {
// 處理字符串...
return content;
});
模板中使用的方式：
<% $ubb2html(content) %>