EAdmin内置了art-template模版引擎,并且默认加载,如果不需要可以删除入口文件中的 module.framework 中的 art-template 依赖即可

TIP

EAdmin文档仅提取了日常开发中最常用的功能,如果需要详细了解,请点击下方官方文档

官方文档

# 调用

将需要使用模版语法的代码包裹在 script 标签中

<!-- 用来存放编译后HTML代码的容器,属性data-template的值就是模版的ID -->
<div data-template="icon"></div>
<!-- script上必须有ID属性用来渲染模版 -->
<script id="icon" type="text/html">
<div>
    {{value}}
</div>
</script>
<!-- 调用Eadmin.template进行模版编译 -->
<script>
    (function(){
        // 该句通常放在ajax请求数据成功后,data参数为接口返回的json数据
        Eadmin.template('icon', data);
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# API

Eadmin.template

编译模版并将编译后的HTML代码输入到 data-template 绑定的容器中

参数 说明 类型 默认值
id 模版的ID string -
data 模版的数据 object -

TIP

下面介绍模版语法,现在假设API接口返回的数据为以下格式,后面所有例子均以下面的数据为基础

let data = {
    code : 100,
    msg  : '请求成功',
    data : {
        id : 999,
        name : '管理员',
        mobile : '13888888888',
        email : '88886666@qq.com',
        other : {
            sex : '男',
            age : 30
        },
        log : [
            {
                id : 1,
                addtime : '2020/02/29 10:00:00',
                action : 'insert' 
            },
            {
                id : 2,
                addtime : '2020/02/29 10:00:00',
                action : 'update' 
            },
            {
                id : 3,
                addtime : '2020/02/29 10:00:00',
                action : 'delete' 
            }
        ]
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

html代码结构为以下

<div>
    <p>姓名:</p>
    <p>手机:</p>
    <p>邮箱:</p>
    <p>性别:</p>
    <p>年龄:</p>
    <span>操作日志</span>
</div>
1
2
3
4
5
6
7
8

# 输出

将变量输出到页面中

<!-- 输出变量 -->
{{value}}
<!-- 输出对象中的变量 -->
{{data.key}}
<!-- 输出对象中的变量 -->
{{data['key']}}
<!-- 三元运算 -->
{{a ? b : c}}
<!-- 判断 -->
{{a || b}}
<!-- 计算 -->
{{a + b}}
1
2
3
4
5
6
7
8
9
10
11
12

现在需要将数据输出到上面的结构中,如下操作即可

<!-- 为div增加data-template属性为模版的ID -->
<div data-template="demo">
    <!-- 将具体的需要操作的HTML放入模版标签中并指定ID -->
    <script id="demo" type="text/html">
    <p>姓名:{{name}}</p>
    <p>手机:{{mobile}}</p>
    <p>邮箱:{{email}}</p>
    <p>性别:{{other.sex}}</p>
    <p>年龄:{{other['age']}}</p>
    </script>
</div>
<script>
    (function(){
        // 编译
        // 第一个参数为模版ID,第二个参数为API接口的返回数据
        Eadmin.template('demo', data.data);
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 条件

if else 判断

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

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

{{if v1}}
...
{{else if v2}}
...
{{else}}
...
{{/if}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

判断如果年龄超过60则输出退休,否则输出在职

<!-- 为div增加data-template属性为模版的ID -->
<div data-template="demo">
    <!-- 将具体的需要操作的HTML放入模版标签中并指定ID -->
    <script id="demo" type="text/html">
    <p>姓名:{{name}}</p>
    <p>手机:{{mobile}}</p>
    <p>邮箱:{{email}}</p>
    <p>性别:{{other.sex}}</p>
    <p>年龄:{{other['age']}}</p>
    <p>状态:{{if other.age > 60}}退休{{else}}在职{{/if}}</p>
    </script>
</div>
<script>
    (function(){
        // 编译
        Eadmin.template('demo', data.data);
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 循环

循环数据

{{each target row key}}
    {{key}} {{row}}
{{/each}}
1
2
3

输出管理员的操作记录数据

<!-- 为div增加data-template属性为模版的ID -->
<div data-template="demo">
    <!-- 将具体的需要操作的HTML放入模版标签中并指定ID -->
    <script id="demo" type="text/html">
    <span>操作日志</span>
    {{each log row key}}
    <p>
        序号:{{key + 1}},ID{{row.id}},时间:{{row.addtime}},动作:{{row.action}}
    </p>
    {{/each}}
    </script>
</div>
<script>
    (function(){
        // 编译
        Eadmin.template('demo', data.data);
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 过滤器

有些时候在输出数据的同时还需要进行一些必要的处理,这个时候可以使用模版过滤器来实现,使用前必须确保在入口文件中的 module.data 中加入了 template-filter.js 的依赖

TIP

模版过滤器的注册文件位置在:js/data/template-filter.js

假如现在接口返回的 addtime 是时间戳,需要格式化成规定的格式,下面的例子中省略了其他代码,仅展示过滤器的使用

<!-- dateFormat是内置的时间格式化过滤器,可直接使用 -->
<p>时间:{{addtime | dateFormat '%y/%M/%d %h:%m:%s'}}</p>
1
2

根据需求自行注册过滤器,例如现在有需求需要在年龄后增加5岁

<p>年龄:{{age | addAge 5}}</p>
1

模版写好后打开 js/data/template-filter.js,在其中增加过滤器如下

// 年龄增加过滤器,其中addAge是过滤器名称
// 第一个参数就是需要过滤器处理的原始值,也就是 "|" 前的字段会作为第一个参数自动传进来
// 例如上例中的 addtime 就会是第一个参数,本例中的 age 就会作为第一个参数自动传入
// 第二个参数是指定的必要参数,如果不需要也可以不传
// 例如上例中的 '%y/%M/%d %h:%m:%s' 就是第二个参数,本例中的 5 就是第二个参数
template.defaults.imports.
addAge = (age, num) => {
    // 一定要将处理后的值return出去才可以
    return age + num;
}
1
2
3
4
5
6
7
8
9
10