目录
安装
方式1：
npm install art-template --save
方式2：
<script src="lib/template-web.js"></script>
语法
编译输出
// 变量
{{value}}
{{data.key}}
{{data['key']}}
// 式子
{{a ? b : c}}
{{a || b}}
{{a + b}}
原文输出
{{@ value }}
条件渲染
模板内容
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
数据
var data = {user:{name:'huahua'}};
渲染结果
<h2>huahua</h2>
循环渲染
模板内容
{{each users}}
{{$index}} {{$value}}
{{/each}}
内容过滤
{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}
内容继承
{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}
子级模板
{{include './header.art'}}
{{include './header.art' data}}
模板变量
//注册变量
template.defaults.imports.log = console.log;
//内置变量
解析
修改界定符
template.defaults.rules[1].test = /{{([@#]?)[ \t]*(\/?)([\w\W]*?)[ \t]*}}/;
压缩
//开启
template.defaults.minimize = true;
//默认
template.defaults.htmlMinifierOptions = {
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
// 运行时自动合并：rules.map(rule => rule.test)
ignoreCustomFragments: []
};
选项
// 模板名字
filename: null,
// 规则列表
rules: [nativeRule, artRule],
// 自动编码
escape: true,
// 调试模式。如果为 true: {cache:false, minimize:false, compileDebug:true}
debug: detectNode ? process.env.NODE_ENV !== 'production' : false,
// bail 如果为 true，编译错误与运行时错误都会抛出异常
bail: true,
// 开启缓存
cache: true,
// 开启压缩
minimize: true,
// 编译调试
compileDebug: false,
// 路径转换
resolveFilename: resolveFilename,
// 子模编译
include: include,
// 压缩插件
htmlMinifier: htmlMinifier,
// 压缩配置
htmlMinifierOptions: {
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
// 运行时自动合并：rules.map(rule => rule.test)
ignoreCustomFragments: []
},
// 错误事件。仅在 bail 为 false 时生效
onerror: onerror,
// 模板文件加载器
loader: loader,
// 缓存中心适配器（依赖 filename 字段）
caches: caches,
// 模板根目录。如果 filename 字段不是本地路径，则在 root 查找模板
root: '/',
// 默认后缀名。如果没有后缀名，则会自动添加 extname
extname: '.art',
// 忽略的变量。被模板编译器忽略的模板变量列表
ignore: [],
// 导入的模板变量
imports: runtime
接口
//编译模板
//方式01
//2诠释：编译模板并返回一个渲染函数
var render = template.compile('hi, <%=value%>.');
//方式02
// compile && cache
template('/welcome.html', 'hi, <%=value%>.');
//渲染模板
//方式01
//2诠释：传入模板数据给编译函数，并渲染成为html内容
var html = render({value: 'aui'});
//方式02
template('/welcome.html', {
value: 'aui'
});
//编渲模板
//2诠释：根据模板名字，编译模板成为渲染函数，并渲染成为html内容
//2语法：template(filename, data)
//2示例：
//3前端渲染：/welcome.html为传入存放模板的元素 id
template('/welcome.html', {value: 'aui'});
//3后端渲染：
//4非绝对路径，则会根据 options.root 来定位模板
template('./welcome.html', {value: 'aui'});
//4为绝对路径
template('./welcome.html', {value: 'aui'});
//默认配置
