artTemplate前端模板引擎使用

-、插件下载

下载地址：https://github.com/aui/art-template/tree/master/lib

二、简单使用

1.引用template-web.js

<script type="text/javascript" src="template-web.js"></script>

2.定义数据结果渲染区

<div id="content"></div>

3. 定义数据模板

使用一个type="text/html"的script标签定义数据存放模板

<script type="text/html" id="data-tpl">
    <div class="layui-form " style="width:99%;">
        <div class="layui-form-item ">
            {{schoolName}}招生计划
        </div>
        <div class="layui-form-item ">
            2020年计划招收新生<strong>{{planClassNumber}}</strong>个班，每班<strong>{{planClassSize}}</strong>人，共<strong>{{planNumber}}</strong>人。{{if(accommodationNumber>0)}}可住宿<strong>{{accommodationNumber}}</strong>人。{{/if}}{{if(enrollmentPlanContent!=null&&enrollmentPlanContent!="")}}{{enrollmentPlanContent}}{{/if}}
        </div>
    </div>
</script>

4. 渲染数据

var data = {
                    schoolName: 'xxx学校',
                    planClassNumber: 10,
                    planClassSize: 45,
                    planNumber: 450,
                    accommodationNumber: 500,
                    enrollmentPlanContent: ''
                };
var html = template('data-tpl', data);
document.getElementById('content').innerHTML = html;

三、artTemplate基础语法

1. 变量输出

{{value}} – 输出单个变量

{{data.key}} – 输出对象中的某个属性

{{data[‘key’]}} – 输出数组中的某个属性

{{a ? b : c}} – 三目运算

{{a || b}} – 为某个变量设置默认值b

{{a + b}} – 表达式运算

{{@ value }} – 原样输出（变量前加@符号）

2. 条件判断

{{if value}} … {{/if}}

{{if v1}} … {{else if v2}} … {{/if}}

3. 循环遍历

形式一（默认key和value）

{{each target}}

{{KaTeX parse error: Expected 'EOF', got '}' at position 6: index}̲} {{value}}

{{/each}}

形式二（自定义key和value）

{{each target val key}}…{{/each}}

4. 引入子模板

– 子模板的默认变量为data

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

– 向子模板传递自定义变量

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

注意：默认情况下，子模板中的数据变量名为data。标准语法不支持对象和数组的声明，只支持引用变量。但是，原始语法没有此限制。

5. 自定义过滤器

第一步：注册过滤器

template.defaults.imports.dateFormat = function(value, format) {…};

template.defaults.imports.timestamp = function(value) {…};

注意：过滤器至少需要一个参数，且第一个参数表示原始变量值，过滤器最后必须要return一个返回值。

第二步：使用过滤器

{{value | 过滤器名称}} – 只有一个参数的过滤器调用方式

{{value | 过滤器名称 参数}} – 有一个以上参数的过滤器调用方式