目录

• 模板引擎概述
  • Ajax 项目中存在的问题
• 使用步骤
• 模板语法
  • 输出
  • 原文输出
  • 条件判断
  • 循环
  • 导入模板变量

模板引擎概述

作用：使用模板引擎提供的模板语法，可以将数据和 HTML 拼接起来。

Ajax 项目中存在的问题

1. 数据和HTML字符串拼接导致代码混乱，拼接容易出错，增加修改难度。
2. 业务逻辑和用户界面混合，代码不易维护。

art-template不仅可以使用在node服务器环境也可以使用在浏览器客户端中

• 官方地址： https://aui.github.io/art-template/zh-cn/index.html

• 文档：http://aui.github.io/art-template/zh-cn/

• Github: https://github.com/aui/art-template

使用步骤

1. 下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件

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

2. 准备 art-template 模板

 <script id="tpl" type="text/html">
     <div class="box"></div>
 </script>

说明：

id是这个模板的唯一标识，用来引用

type="text/html"是解决在html页面中模板无法代码高亮问题

3. 告诉模板引擎将哪一个模板和哪个数据进行拼接

var html = template('tpl', {username: 'zhangsan', age: '20'});

4. 将拼接好的html字符串添加到页面中

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

5. 通过模板语法告诉模板引擎，数据和html字符串要如何拼接

<script id="tpl" type="text/html">
     <div class="box"> {{ username }} </div>
 </script>

模板语法

模板语法的作用是告诉模板引擎数据和模板要如何进行拼接。

输出

将数据显示在模板中。

 <h2>{{value}}</h2>
 <h2>{{a ? b : c}}</h2>
 <h2>{{a + b}}</h2>

原文输出

如果数据中携带HTML标签，默认情况下，模板引擎不会解析标签，会将其转义后原文输出。

<h2>{{@ value }}</h2>

条件判断

 {{if 条件}} ... {{/if}}
 {{if v1}} ... {{else if v2}} ... {{/if}}

{{if 条件}}
	<div>条件成立 显示我</div>
{{else}}
	<div>条件不成立 显示我</div>
{{/if}}

循环

 {{each target}}
     {{$index}} {{$value}}
 {{/each}}

导入模板变量

<div>$imports.dataFormat(time)</div>

说明：如方法在全局作用域下可以直接使用

如果没有全局作用域可以导入到template模板中进行使用：

template.defaults.imports.变量名 = 变量值;
$imports.变量名称

function dateFormat（未格式化的原始时间）{
    return '已经格式化好的当前时间'
}
template.defaults.imports.dateFormat = dateFormat;