node.js 模板引擎
2020年7月22日第三方组件 art-template 模板引擎
中文文档http://aui.github.io/art-template/zh-cn/docs/index.html
标准语法
1 2 3 |
{{if user}} {{user.name}} {{/if}} |
原始语法
1 2 3 |
<% if (user) { %> <h2><%= user.name %></h2> <% } %> |
渲染模板
1 2 3 4 5 6 |
var template = require('art-template'); var html = template(__dirname + '/tpl-user.art', { user: { name: 'aui' } }); |
核心方法
1 2 3 |
template(filename, data); // 基于模板名渲染模板 template.compile(source, options); // 将模板源代码编译成函数 template.render(source, data, options); // 将模板源代码编译成函数并立刻执行 |
输出
标准语法 模板一级特殊变量可以使用 $data 加下标的方式访问:{{$data[‘user list’]}}
1 2 3 4 5 6 |
{{value}} {{data.key}} {{data['key']}} {{a ? b : c}} {{a || b}} {{a + b}} |
原始语法
1 2 3 4 5 6 |
<%= value %> <%= data.key %> <%= data['key'] %> <%= a ? b : c %> <%= a || b %> <%= a + b %> |
原文输出
标准语法
1 |
{{@ value }} |
原始语法 原文输出语句不会对 HTML 内容进行转义处理,可能存在安全风险,请谨慎使用。
1 |
<%- value %> |
条件
标准语法
1 2 |
{{if value}} ... {{/if}} {{if v1}} ... {{else if v2}} ... {{/if}} |
原始语法
1 2 |
<% if (value) { %> ... <% } %> <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %> |
循环
标准语法 target 支持 array 与 object 的迭代,其默认值为 $data。$value 与 $index 可以自定义:{{each target val key}}
1 2 3 |
{{each target}} {{$index}} {{$value}} {{/each}} |
原始语法
1 2 3 |
<% for(var i = 0; i < target.length; i++){ %> <%= i %> <%= target[i] %> <% } %> |
变量
标准语法
1 |
{{set temp = data.sub.content}} |
原始语法
1 |
<% var temp = data.sub.content; %> |
模板继承
标准语法
1 2 |
{{extend './layout.art'}} {{block 'head'}} ... {{/block}} |
原始语法
1 2 |
<% extend('./layout.art') %> <% block('head', function(){ %> ... <% }) %> |
编写layout.html
1 2 3 |
<!doctype html> {{block 'head'}}{{/block}} {{block 'content'}}{{/block}} |
继承后往layout.html写入文本
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{{extend './layout.html'}} {{block 'title'}} {{title}} {{/block}} {{block 'head'}} {{/block}} {{block 'content'}} This is just an awesome page. {{/block}} |
子模板
标准语法 不支持声明 object 与 array,只支持引用变量,而原始语法不受限制。
art-template 内建 HTML 压缩器,请避免书写 HTML 非正常闭合的子模板,否则开启压缩后标签可能会被意外“优化。
1 2 |
{{include './header.art'}} {{include './header.art' data}} |
原始语法
1 2 |
<% include('./header.art') %> <% include('./header.art', data) %> |
过滤器
注册过滤器
1 2 |
template.defaults.imports.dateFormat = function(date, format){/*[code..]*/}; template.defaults.imports.timestamp = function(value){return value * 1000}; |
过滤器函数第一个参数接受目标值。
标准语法 过滤器语法类似管道操作符,它的上一个输出作为下一个输入。
1 2 |
{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}} {{value | filter}} |
原始语法
1 |
<%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm:ss') %> |