artTemplate的基本语法

javascript引擎的实质就是帮我们把带有JavaScript代码的伪THTML语句编译为HTML。

一：artTemplate基本语法结构
1：表达式
{{与}}包裹起来的语句则为面板的逻辑表达式

2：输出表达式
对内容编码输出：{{content}}
不编码输出：{{#content}}
编码可以防止数据中含有HTML字符串，避免引起XSS攻击

3：变量
{{set temp=data.sub.content}}

4：条件表达式
{{if admin}}
    <p>admin</p>
{{else if code>0}}
    <p>master</p>
{{else}}
    <p>error!</p>
{{/if}}

5：遍历表达式
无论数组或者对象都可以用each进行遍历

{{each list as value index}}
    <li>{{index}}-{{value.user}}</li>
{{/each}}

也可以被简写成：
{{each list}}
    <li>{{index}}-{{$value.user}}</li>
{{/each}}

6：子模块(模块包含表达式)
a:用于嵌入子模块
{{include './header.art'}}

b:子模块默认共享当前数据，亦可以指定数据
{{include './header.art' data}}

注意：
①data 数默认值为 $data；标准语法不支持声明 object 与 array，只支持引用变量，而原始语法不受限制。
②art-template 内建 HTML 压缩器，请避免书写 HTML 非正常闭合的子模板，否则开启压缩后标签可能会被意外“优化。

7：辅助方法
a.使用template.helper(name, callback)注册公用辅助方法：

template.helper('dateFormat', function (date, format) {
    // ..
    return value;
});

b.模板中使用的方式：

{{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}


c.支持传入参数与嵌套使用：
{{time | say:'cd' | ubb | link}}

8：过滤器
a.注册过滤器

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


过滤器函数第一个参数接受目标值。

b.语法:{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}
{{value | filter}} 过滤器语法类似管道操作符，它的上一个输出作为下一个输入。
转自博客：https://blog.csdn.net/gao_xu_520/article/details/78594792
artTemplate的基本语法

猜你喜欢
