art-template 模板引擎使用总结

最新推荐文章于 2021-07-29 15:52:44 发布

weixin_34209406

最新推荐文章于 2021-07-29 15:52:44 发布

阅读量542

点赞数

文章标签： runtime python java

原文链接：https://my.oschina.net/ososchina/blog/1600142

版权

2019独角兽企业重金招聘Python工程师标准>>>

一.语法

①按原文输出（不转HTML编码输出）

{{@ value }}

②循环

{{each list}}
    {{$index}} {{$value}}
{{/each}}

以上方式等价于

{{each list value index}}
    {{index}} {{value }}
{{/each}}

③生成临时变量与条件判断

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

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

示例：

{{if value}}
{{set status='checked'}} 
{{else}}
{{set status='unchecked'}} 
{{/if}}
<label>是否同意<input type="checkbox" name='status' {{status}}='{{status}}' /></label>

④模板继承

1.创建模板架构layout.art

<!--layout.art-->
<!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>

2.继承模板index.art

<!--index.art-->
{{extend './layout.art'}}

{{block 'title'}}{{title}}{{/block}}

{{block 'head'}}
    <link rel="stylesheet" href="custom.css">
{{/block}}

{{block 'content'}}
<p>This is just an awesome page.</p>
{{/block}}

实际上，index.art继承了layout.art的骨架，然后，将layout.art中block包围的地方使用index.art中的的block替换，类似于java中的方法重写。

⑤引用子模板

{{include './header.art'}}

引入子模板，将data变量提升一层，如{{data.name}}提升之后直接使用{{name}}

{{include './header.art' mydata}}

以上是文件形式的，对于当前页面，还可以使用如下语法

<body>
<div id="app"></div>
<script src="template-debug.js"></script>
<script id="main" type="text/html">
    <ul>
       {{each list}}
            <li>{{$value}}</li>
        {{/each}}
    </ul>
</script>
<script id="test" type="text/html">
    <div>
        <ul>
            {{each person}}
                <li>{{$value.name}}</li>
            {{/each}}
        </ul>
        {{include 'main' a}}
    </div>
</script>
<script>
    var data = {
        person:[
            {name:"jack",age:18},
            {name:"tom",age:19},
            {name:"jerry",age:20},
            {name:"kid",age:21},
            {name:"jade",age:22}
        ],
        a:{
            list:['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
        }
    };
    var html = template("test",data);
    document.getElementById("app").innerHTML=html;
</script>
</body>

以上语法中使用了{{include 'main' a}}，如果我们使用{{include 'main' }}，那么子模板的语法应该修改成如下写法：

<script id="main" type="text/html">
    <ul>
       {{each a.list}}
            <li>{{$value}}</li>
        {{/each}}
    </ul>
</script>

⑥转换器

template.defaults.imports.dateFormat = function(timestamp, format){
   var date = new Date(timestamp);
   var dateFormat = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds(),
        "q+": Math.floor((date.getMonth() + 3) / 3),
        "S+": date.getMilliseconds()
    };
    if (/(y+)/i.test(format)) {
        format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    for (var k in dateFormat ) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length == 1
                ? dateFormat[k] : ("00" + dateFormat[k]).substr(("" + dateFormat[k]).length));
        }
    }
    return format;

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

使用

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

⑦函数

对于旧版art-template而言，使用template.helper也可以实现转换器的作用，默认情况下BOM对象可以直接作为helper来使用,如Math.min，其他则需要自定义

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>Index</title>  
        <script src="dist/template.js">  
        </script>  
    </head>  
    <body>  
    <div id="content">  
    </div>  
    <script id="test" type="text/html">  
        {{logs(Math.min(n,1))}}  
    </script>  
    <script>  
        template.helper("logs", function(a){  
            return a*10;  
        });  
        var data = {  
            n: 123  
        };  
        var html = template("test", data);  
        document.getElementById("content").innerHTML = html;  
    </script>  
    </div>  
</body>  
</html>

注意：转换器和函数的区别主要是参数数量差异比较大，转换器至多只能1-2个参数，而函数可以是0-多个

二.配置选项

template.defaults

// 模板名
filename: null,

// 模板语法规则列表
rules: [nativeRule, artRule],

// 是否开启对模板输出语句自动编码功能。为 false 则关闭编码输出功能
// escape 可以防范 XSS 攻击
escape: true,

// 启动模板引擎调试模式。如果为 true: {cache:false, minimize:false, compileDebug:true}
debug: detectNode ? process.env.NODE_ENV !== 'production' : false,

// bail 如果为 true，编译错误与运行时错误都会抛出异常
bail: true,

// 是否开启缓存
cache: true,

// 是否开启压缩。它会运行 htmlMinifier，将页面 HTML、CSS、CSS 进行压缩输出
// 如果模板包含没有闭合的 HTML 标签，请不要打开 minimize，否则可能被 htmlMinifier 修复或过滤
minimize: true,

// 是否编译调试版
compileDebug: false,

// 模板路径转换器
resolveFilename: resolveFilename,

// 子模板编译适配器
include: include,

// HTML 压缩器。仅在 NodeJS 环境下有效
htmlMinifier: htmlMinifier,

// HTML 压缩器配置。参见 https://github.com/kangax/html-minifier
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

转载于:https://my.oschina.net/ososchina/blog/1600142