amis/docs/zh-CN/concepts/template.md
吴多益 c8c4b6efa3
文档文字小调整;统一删掉 schema 中的高度设置;修复 tinymce 弹窗可能被遮挡问题 (#1336)
* 文档优化

* 文档细节调整,删除示例的 height 设置,使用自动撑开

* sdk 使用完整例子,因为新版没发布

* 修复官网语言不正确问题

* 增加 icon 调整颜色及大小的例子

* 修复文字错误

* 补充 each 的文档

* 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00

114 lines
2.9 KiB
Markdown
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: 模板
description:
type: 0
group: 💡 概念
menuName: 模板
icon:
order: 11
---
为了可以更加灵活渲染文本、数据结构amis 借鉴其他模板引擎,实现了一套模板渲染功能。
## 模板字符串
### 普通文本
配置一段普通文本并输出
```schema
{
"type": "page",
"body": "Hello World!" // 输出 Hello World!
}
```
### 文本中获取变量
可以支持在普通文本中,使用**数据映射**语法:`${xxx}` 获取数据域中变量的值,如下
```schema
{
"data": {
"text": "World!"
},
"type": "page",
"body": "Hello ${text}" // 输出 Hello World!
}
```
更多`${xxx}`语法相关介绍,移步 [数据映射](./data-mapping)。
### 渲染 html
使用**数据映射**语法:`${xxx}` 获取数据域中变量的值,并渲染 HTML
```schema
{
"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
{
"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'}" //错误!
}
```