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

1. artTemplate 简洁语法模板

（1）引入插件：

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

（2）编写模板：

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

{{title}}h1>

    {{each list as value i}}

       

索引 {{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}}

       

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

    {{/each}}

{{/if}}

2. artTemplate 原生 js 模板语法版

（1）使用

在页面中引用模板引擎：

src = "template-native.js" >

（2）表达式

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

（3）输出表达式

对内容编码输出：

<%= content %>

不编码输出：

<%=# content %>

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

（4）逻辑

支持使用 js 原生语法：

<%=title%>h1>

    <%for(i = 0; i < list.length; i ++) {%>

       

条目内容 <%=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 ( ); %>