artTemplate基本语法

我不是女神ヾ 2021-09-14 09:48 367阅读 0赞

这边是以标准语法来操作的。javascript引擎的实质就是帮我们把带有JavaScript代码的伪THTML语句编译为HTML。

一.artTemplate基本语法结构

(1).表达式  
\{ \{ 与 \}\} 符号包裹起来的语句则为模板的逻辑表达式。

(2).输出表达式

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

(3).变量

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

(4).条件表达式 
\{ \{if admin\}\} 
        admin 
\{ \{else if code > 0\}\} 
       master 
\{ \{else\}\} 
        error! 
\{ \{/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\}\} 过滤器语法类似管道操作符，它的上一个输出作为下一个输入。

二.模板继承

语法：\{ \{extend './layout.art'\}\}  
\{ \{block 'head'\}\} ... \{ \{/block\}\}

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

<!doctype html> <html> <head> <meta charset="utf-8"> <title>{ {block 'title'}}My Site{ {/block}}</title> { {block 'head'}} <link rel="stylesheet" href="main.css"> { {/block}} </head> <body> { {block 'content'}}{ {/block}} </body> </html>

{ {extend './layout.art'}} { {block 'title'}}{ {title}}{ {/block}} { {block 'head'}} <link rel="stylesheet" href="custom.css"> { {/block}} { {block 'content'}} This is just an awesome page. { {/block}}

渲染 index.art 后，将自动应用布局骨架