artTemplate 簡介語法模板

<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.一、 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) %>