codesmith 模板 html5,js-template-art【二】语法(示例代码)

一、模板语法

1、变量使用与输出

或：

{{ifuser}}

{{user.name}}

{{/if}}

art-template 同时支持 {{expression}} 简约语法与任意 JavaScript 表达式 。

2、原始输出

{{@value}}

或

原始输出语句不会对 HTML 内容进行转义

3、条件

{{if value}} ... {{/if}}

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

或 ...

... ...

4、循环

{{each target}}

{{$index}} {{$value}}

{{/each}}

或

target 支持 Array 与 Object 的迭代，其默认值为 $data

$value 与 $index 可以自定义：{{each target val key}}

5、变量

{{set temp =data.sub.content}}

或

6、模板继承

{{extend ‘./layout.art‘}}

{{block‘head‘}} ... {{/block}}

或

...

模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”。

7、子模板

{{include ‘./header.art‘}}

{{include‘./header.art‘data}}

或

include 第二个参数默认值为 $data。

8、打印输出

9、过滤器

//向模板中导入全局变量

template.defaults.imports.$dateFormat = function(date, format){/*[code..]*/};

template.defaults.imports.$timestamp= function(value){return value * 1000};

因为 imports 定义的全局变量的优先级会比普通模板变量高，所以建议命名使用 $ 前缀。

{{date | $timestamp | $dateFormat ‘yyyy-MM-dd hh:mm:ss‘}}

或

{{value | filter}} 过滤器语法类似管道操作符，它的上一个输出作为下一个输入。

10、压缩html、js、css

template.defaults.minimize = true;

art-template 的页面压缩功能是在编译阶段实现的，因此完全不影响渲染速度，并且能够加快网络传输速度。但也有一个限制，它不能正常处理未闭合的 HTML 标签，因此使用 include 语句载入模板片段的时候请小心。

请避免书写这样的模板：