art-template是一款开源的js的模板引擎，渲染速度比较快，使用后可以介绍不少的代码量，本文记录下使用过程中遇到的问题及解决方法。

介绍

官网地址： http://aui.github.io/art-template/zh-cn/

下载地址：https://github.com/aui/art-template

art-template可以应用于前端js、koa、nodejs、webpack、express中。定义模板后，组织数据对象，然后使用template渲染出结果html片段。

特性

1. 拥有接近 JavaScript 渲染极限的的性能
2. 调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）
3. 支持 Express、Koa、Webpack
4. 支持模板继承与子模板
5. 浏览器版本仅 6KB 大小

模板

art-template 同时支持两种模板语法。标准语法可以让模板更容易读写；原始语法具有强大的逻辑处理能力。

标准语法

{{if user}}
  <h2>{{user.name}}</h2>
{{/if}}

原始语法

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

原始语法兼容 EJS、Underscore、LoDash 模板。

渲染模板

var template = require('art-template');
var html = template(__dirname + '/tpl-user.art', {
    user: {
        name: 'aui'
    }
});

核心方法

// 基于模板名渲染模板
template(filename, data);

// 将模板源代码编译成函数
template.compile(source, options);

// 将模板源代码编译成函数并立刻执行
template.render(source, data, options);

安装

• Npm

npm install art-template --save

在浏览器中实时编译

下载：template-web.js（gzip: 6kb）

• 兼容

IE8+（IE8 需要补丁才能运行。示例）

• 差异

因为浏览器不支持文件系统，所以 template(filename, data) 不支持传入文件路径，它内部使用 document.getElementById(filename).innerHTML 来获取模板，例如：

<script src="lib/template-web.js"></script>
<script id="tpl-user" type="text/html">
{{if user}}
  <h2>{{user.name}}</h2>
{{/if}}
</script>

• 在浏览器中预编译

使用 Webpack 的 Loader: art-template-loader。

• 插件

• Webpack: art-template-loader
• Express: express-art-template
• Koa: koa-art-template

问题

1、使用中html原样输出，没有被浏览器解析成dom。
解决方法：定义template.defaults.escape=false;关闭编码输出功能
2、使用template(id, data);返回一个function。
解决方法：使用template返回一个渲染render方法，然后使用该方法使用数据后渲染出最后的html片段。

<script type="text/html" id="strategyInstanceStateTemplate">
    <span style="color: {{strategyStatusColor}};">({{strategyStatus}})</span>
</script>

var cacheRender = template($('#strategyInstanceStateTemplate').html()); //生成渲染函数对象
var data = object; //渲染数据源
var destHtml = cacheRender(data);  //使用数据渲染html片段