amis/docs/renderers/Tpl.md
2019-07-03 17:41:28 +08:00

103 lines
4.2 KiB
Markdown
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.

## Tpl
tpl 类型的渲染器支持用 JS 模板引擎来组织输出,采用的 lodash 的 [template](https://lodash.com/docs/4.15.0#template),关于语法部分,请前往 lodash 文档页面。
```schema:height="200"
{
"data": {
"user": "no one",
"items": [
"A",
"B",
"C"
]
},
"body": [
{
"type": "tpl",
"tpl": "User: <%= data.user%>"
},
{
"type": "tpl",
"inline": false,
"tpl": "<% if (data.items && data.items.length) { %>Array: <% data.items.forEach(function(item) { %> <span class='label label-default'><%= item %></span> <% }); %><% } %>"
}
]
}
```
仔细看示例不难发现,语法跟 ejs 很像,`<% 这里面是 js 语句 %>`,所以只要会写 js做页面渲染没有什么问题。另外以下是一些可用 js 方法。
- `formatDate(value, format='LLL', inputFormat='')` 格式化时间格式,关于 format 请前往 [moment](http://momentjs.com/) 文档页面。
- `formatTimeStamp(value, format='LLL')` 格式化时间戳为字符串。
- `formatNumber(number)` 格式化数字格式,加上千分位。
- `countDown(value)` 倒计时,显示离指定时间还剩下多少天,只支持时间戳。
- 下面 filters 中的方法也可以使用如: `<%= date(data.xxx, 'YYYY-MM-DD')%>`
- 可以联系我们添加更多公用方法。
如:
```json
{
"data": {
"user": "no one"
},
"body": {
"type": "tpl",
"tpl": "User: <%= formatDate(data.time, 'YYYY-MM-DD') %>"
}
}
```
如果只想简单取下变量,可以用 `$xxx` 或者 `${xxx}`。同时如果不指定类型,默认就是 `tpl`, 所以以上示例可以简化为。
> 取值支持多级,如果层级比较深可以用 `.` 来分割如: `${xx.xxx.xx}`
> 另外 `$&` 表示直接获取当前的 `data`。
```schema:height="200"
{
"data": {
"user": "no one"
},
"body": "User: $user"
}
```
通过 `$xxx` 取到的值,默认是不做任何处理,如果希望把 html 转义了的,请使用:`${xxx | html}`。
从上面的语法可以看出来,取值时是支持指定 filter 的,那么有哪些 filter 呢?
- `html` 转义 html 如:`${xxx|html}`。
- `json` json stringify。
- `raw` 表示不转换, 原样输出。
- `date` 做日期转换如: `${xxx | date:YYYY-MM-DD}`
- `number` 自动给数字加千分位。`${xxx | number}` `9999` => `9,999`
- `trim` 把前后多余的空格去掉。
- `percent` 格式化成百分比。`${xxx | percent}` `0.8232343` => `82.32%`
- `round` 四舍五入取整。
- `truncate` 切除, 当超出 200 个字符时,后面的部分直接显示 ...。 `${desc | truncate:500:...}`
- `url_encode` 做 url encode 转换。
- `url_decode` 做 url decode 转换。
- `default` 当值为空时,显示其他值代替。 `${xxx | default:-}` 当为空时显示 `-`
- `join` 当值是 array 时,可以把内容连起来。\${xxx | join:,}
- `first` 获取数组的第一个成员。
- `last` 获取数组的最后一个成员。
- `pick` 如果是对象则从当前值中再次查找值如: `${xxx|pick:yyy}` 等价于 `${xxx.yyy}`。如果是数组,则做 map 操作,操作完后还是数组,不过成员已经变成了你选择的东西。
- `ubb2html` 我想你应该不需要,贴吧定制的 ubb 格式。
- `html2ubb` 我想你应该不需要,贴吧定制的 ubb 格式。
- `split` 可以将字符传通过分隔符分离成数组,默认分隔符为 `,` 如: `${ids|split|last}` 即取一段用逗号分割的数值中的最后一个。
- `nth` 取数组中的第 n 个成员。如: `${ids|split|nth:1}`
- `str2date` 请参考 [date](./Date.md) 中日期默认值的设置格式。
- `duration` 格式化成时间端如:`2` -=> `2秒` `67` => `1分7秒` `1111111` => `13天21时39分31秒`
- `asArray` 将数据包成数组如: `a` => `[a]`
- `lowerCase` 转小写
- `upperCase` 转大写
- `base64Encode` base64 转码
- `base64Decode` base64 解码
组合使用。
- `${&|json|html}` 把当前可用的数据全部打印出来。\$& 取当前值json 做 json stringify然后 html 转义。
- `${rows:first|pick:id}` 把 rows 中的第一条数据中的 id 取到。
- `${rows|pick:id|join:,}`