[Baidu amis] Template

Posted on Edited on In , , Views: Word count in article: 3.8k Reading time ≈ 3 mins.

Template

In order to render text and data structures more flexibly, amis implements two template rendering functions refer to other template engines.

  • Template string ${xxx}

  • JavaScript template engine <%= data.xxx %>, <%- expression %>

Template string

Plain text

Configure plain text and output.

1
Hello World!
1
2
3
4
{
  "type": "page",
  "body": "Hello World!"
}

Use variables in text

It can support the use of Data Mapping - https://baidu.github.io/amis/zh-CN/docs/concepts/data-mapping syntax in plain text: ${xxx} to get the value of the variable in the data attribute, as follows:

1
Hello World!
1
2
3
4
5
6
7
{
  "data": {
    "text": "World!"
  },
  "type": "page",
  "body": "Hello ${text}"
}

For more ${xxx} syntax related introduction, move to Data Mapping.

Render HTML

Use Data Mapping syntax: ${xxx} to get the value of the variable in the data attribute and render HTML

1
2
Hello
World!
1
2
3
4
5
6
7
{
  "data": {
    "text": "World!"
  },
  "type": "page",
  "body": "<h1>Hello</h1> <span>${text}</span>"
}

JavaScript template engine

amis also supports the use of JavaScript template engine for organizing output, and the internal use of lodash - https://lodash.com/docs/4.17.15#template template for implementation.

1
2
User: no one
Array: A B C
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "type": "page",
  "data": {
    "user": "no one",
    "items": [
      "A",
      "B",
      "C"
    ]
  },
  "body": [
    {
      "type": "tpl",
      "tpl": "User: <%= data.user %>"
    },
    {
      "type": "divider"
    },
    {
      "type": "tpl",
      "tpl": "<% if (data.items && data.items.length) { %>Array: <% data.items.forEach(function(item) { %> <span class='label label-default'><%= item %></span> <% }); %><% } %>"
    }
  ]
}

Did you notice?

In the JavaScript template engine, the way we get the data attribute variables is data.xxx, not the previous ${xxx}. If you are familiar with JavaScript, the template engine here actually treats the data attribute as the data scope of the current code. Execute, so you need to use data.xxx for value

Pay attention to the correct value method in different scenarios when using the template.

Looking carefully at the example, it is not difficult to find that the syntax is very similar to EJS – Embedded JavaScript templates - https://ejs.co/, <% here is the js statement %>, so as long as you can write js, there is no problem with page rendering. In addition, the following are some available js methods.

  • formatDate(value, format='LLL', inputFormat='') format the time format. For format, please go to the moment documentation page Moment.js | Docs - https://momentjs.com/docs/.

  • formatTimeStamp(value, format='LLL') Format the time stamp as a string.

  • formatNumber(number) Format the number format, plus thousands.

  • countDown(value) Countdown, showing how many days are left before the specified time, only supports timestamp.

The following methods in filters can also be used such as: <%= date(data.xxx,'YYYY-MM-DD') %>

Limititaions

1. Template strings and template engines cannot be used interchangeably

E.g:

1
2
3
4
{
  "type": "tpl",
  "tpl": "${data.xxx ==='a'}" //Error!
}

References

[1] Template | amis - 低代码前端框架 - https://baidu.github.io/amis/zh-CN/docs/concepts/template

[2] Data Mapping | amis - 低代码前端框架 - https://baidu.github.io/amis/zh-CN/docs/concepts/data-mapping

[3] Template | Lodash Documentation - https://lodash.com/docs/4.17.15#template

[4] EJS – Embedded JavaScript templates - https://ejs.co/

[5] Moment.js | Docs - https://momentjs.com/docs/

[6] baidu/amis: 前端低代码框架，通过 JSON 配置就能生成各种页面。 - https://github.com/baidu/amis

[7] amis - 低代码前端框架 - https://baidu.gitee.io/amis/