template 模板封装了第三方模板引擎 Mustache.js，可以访问Mustache.js 文档了解更多信息。本组件暂时只支持辅助其他组件完成模板渲染工作，直接使用不会渲染。
| 标题 | 内容 |
|---|
| 所需脚本 | https://mipcache.bdstatic.com/static/v1/mip-mustache/mip-mustache.js |
示例
Hello {{world}}!
/**
* 组件脚本代码
*
* element {HTML node} HTML DOM 节点
* data {Object} 是传递给模板用来渲染的数据
* html {string} 编译后的 html 字符串
*/
var templates = require('templates');
templates.render(element, data).then(function (html) {
element.innerHTML = html;
});
属性
type
说明：模板引擎类型
必选项：是
类型：字符串
Mustache 语法
基本使用
- data
{
name: 'Chris',
age: '15',
sex: 'female'
}
- Template
name: {{name}}
age: {{age}}
sex: {{sex}}
sex: {{{sex}}}
sex: {{&sex}}
{{=<% %>=}}
sex: {{sex}}
<%={{ }}=%>
- 编译后的 html
name: Chris
age: 15
sex: female</b>
sex: female
sex:
sex: {{sex}}复杂data的使用
- data
{
name: {
first: 'Michael',
last: 'Jackson'
},
age: '15'
}
- Template
name: {{name.first}} {{name.last}}
age: {{age}}
- 编译后的 html
name: Michael Jackson
age: 15对象数组
- data
{
"stooges": [
{ "name": "Moe" },
{ "name": "Larry" },
{ "name": "Curly" }
]
}
- Template
{{#stooges}}
{{name}}
{{/stooges}}
- 编译后的 html
Moe
Larry
Curly一维数组
- data
{
musketeers: ["Athos", "Aramis", "Porthos", "D'Artagnan"]
}
- Template
{{#musketeers}}
{{.}}
{{/musketeers}}
- 编译后的 html
Athos
Aramis
Porthos
D'Artagnan循环函数
- data
{
"beatles": [
{ "firstName": "John", "lastName": "Lennon" },
{ "firstName": "Paul", "lastName": "McCartney" },
{ "firstName": "George", "lastName": "Harrison" },
{ "firstName": "Ringo", "lastName": "Starr" }
],
"name": function () {
return this.firstName + " " + this.lastName;
}
}
- Template
{{#beatles}}
{{name}}
{{/beatles}}
- 编译后的 html
John Lennon
Paul McCartney
George Harrison
Ringo Starr函数
- data
{
"name": "Tater",
"bold": function () {
return function (text, render) {
return "" + render(text) + "";
}
}
}
- Template
{{#bold}}Hi {{name}}.{{/bold}}
- 编译后的 html
Hi Tater.空数组的处理
- data
{
"repos": []
}
- Template
{{#repos}}{{name}}{{/repos}}
{{^repos}}No repos !!{{/repos}}
- 编译后的 html
No repos !!可以访问Mustache.js 文档了解更多信息。
