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）使用

在页面中引用模板引擎：

<script

src="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();
 %>

来源：CSDN

作者：carriehaohao

链接：https://blog.csdn.net/carriehaohao/article/details/54172943

标签

artTemplate

arttemplate语法