mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-04 21:08:55 +08:00
0ae04ce946
* docs：将文档移动 zh-CN 目录下；为以后支持英文版做准备 * 整理 autoFill * 补充下载最新版本的说明 (#1298) * fix: 修复在新版 Firefox 下 js sdk 报错 (#1300) * 删掉可能报错的代码 (#1311) * fix: 修复 css 变量不支持数字问题 (#1302) * feat：增加 animation-duration，可以控制所有动画时长，也能用于一次性关闭所有动画效果 (#1303) * feat：增加 animation-duration，可以控制所有动画时长，也能用于一次性关闭所有动画效果 * 补充文档 * Pageleave (#1310) * form 添加页面离开提示功能 * 补充文档 Co-authored-by: 2betop <2betop.cn@gmail.com> Co-authored-by: liaoxuezhi <liaoxuezhi@baidu.com>
114 lines
2.9 KiB
Markdown
Executable File
114 lines
2.9 KiB
Markdown
Executable File
---
|
||
title: 模板
|
||
description:
|
||
type: 0
|
||
group: 💡 概念
|
||
menuName: 模板
|
||
icon:
|
||
order: 11
|
||
---
|
||
|
||
为了可以更加灵活渲染文本、数据结构，amis 借鉴其他模板引擎，实现了一套模板渲染功能。
|
||
|
||
## 模板字符串
|
||
|
||
### 普通文本
|
||
|
||
配置一段普通文本并输出
|
||
|
||
```schema:height="200"
|
||
{
|
||
"type": "page",
|
||
"body": "Hello World!" // 输出 Hello World!
|
||
}
|
||
```
|
||
|
||
### 文本中获取变量
|
||
|
||
可以支持在普通文本中，使用**数据映射**语法：`${xxx}` 获取数据域中变量的值，如下
|
||
|
||
```schema:height="200"
|
||
{
|
||
"data": {
|
||
"text": "World!"
|
||
},
|
||
"type": "page",
|
||
"body": "Hello ${text}" // 输出 Hello World!
|
||
}
|
||
```
|
||
|
||
更多`${xxx}`语法相关介绍，移步 [数据映射](./data-mapping)。
|
||
|
||
### 渲染 html
|
||
|
||
使用**数据映射**语法：`${xxx}` 获取数据域中变量的值，并渲染 HTML
|
||
|
||
```schema:height="200"
|
||
{
|
||
"data": {
|
||
"text": "World!"
|
||
},
|
||
"type": "page",
|
||
"body": "<h1>Hello</h1> <span>${text}</span>"
|
||
}
|
||
```
|
||
|
||
## JavaScript 模板引擎
|
||
|
||
amis 还支持用 JavaScript 模板引擎进行组织输出，内部采用 [lodash template](https://lodash.com/docs/4.17.15#template) 进行实现。
|
||
|
||
```schema:height="300"
|
||
{
|
||
"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> <% }); %><% } %>"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
> 注意到了吗？
|
||
>
|
||
> 在 JavaScript 模板引擎中，我们获取数据域变量的方式是`data.xxx`，而不是之前的`${xxx}`，如果你熟悉 JavaScript 的话，这里模板引擎其实是将数据域，当做当前代码的数据作用域进行执行，因此需要使用`data.xxx`进行取值
|
||
>
|
||
> 要注意使用模板的时候在不同的场景下要使用正确的取值方式。
|
||
|
||
仔细看示例不难发现，语法跟 ejs 很像，`<% 这里面是 js 语句 %>`，所以只要会写 js，做页面渲染没有什么问题。另外以下是一些可用 js 方法。
|
||
|
||
- `formatDate(value, format='LLL', inputFormat='')`格式化时间格式，关于 format 请前往 [moment](https://momentjs.com/docs/) 文档页面。
|
||
- `formatTimeStamp(value, format='LLL')` 格式化时间戳为字符串。
|
||
- `formatNumber(number)` 格式化数字格式，加上千分位。
|
||
- `countDown(value)` 倒计时，显示离指定时间还剩下多少天，只支持时间戳。
|
||
|
||
下面 filters 中的方法也可以使用如： `<%= date(data.xxx, 'YYYY-MM-DD') %>`
|
||
|
||
## 注意事项
|
||
|
||
#### 1. 模板字符串 和 模板引擎 不可以交叉使用
|
||
|
||
例如：
|
||
|
||
```json
|
||
{
|
||
"type": "tpl",
|
||
"tpl": "${data.xxx === 'a'}" //错误！
|
||
}
|
||
```
|