artTemplate 模板引擎（简洁语法/原生语法）

1. artTemplate 简洁语法模板

（1）引入插件：

<script src="template.js"></script>

（2）编写模板：

<script id="test" type="text/html">

<h1>{{title}}</h1>

<ul>

   {{each list as value i}}

       <li>索引 {{i + 1}} ：{{value}}</li>

   {{/each}}

</ul>

</script>

（3）渲染数据：

var data = {

    title: '标签',

    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']

};

var html = template('test', data);

document.getElementById('content').innerHTML = html;

（4）简洁语法：

{{if admin}}

   {{include 'admin_content'}}

   {{each list}}

       <div>{{$index}}. {{$value.user}}</div>

   {{/each}}

{{/if}}

2. artTemplate 原生 js 模板语法版

（1）使用

在页面中引用模板引擎：

<scriptsrc="template-native.js"></script>

（2）表达式

<%与 %> 符号包裹起来的语句则为模板的逻辑表达式。

（3）输出表达式

对内容编码输出：

<%=content%>

不编码输出：

<%=#content%>

编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。

（4）逻辑

支持使用 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)%>

（5）辅助方法（解决模板不能访问全局对象的问题）

使用 template.helper(name, callback) 注册公用辅助方法，例如一个访问全局变量jQuery的方法：

template.helper('getJquery', function () {

   return $;

});

模板中使用的方式：

<%getJquery(); %>