template 模板封裝了第三方模板引擎 Mustache.js，可以訪(fǎng)問(wèn)Mustache.js 文檔了解更多信息。本組件暫時(shí)只支持輔助其他組件完成模板渲染工作，直接使用不會(huì)渲染。

示例

<!-- 模板引擎類(lèi)型的組件統(tǒng)一使用 `<template>` 標(biāo)簽 -->
<template type="mip-mustache">
Hello {{world}}!
</template>

/**
 * 組件腳本代碼
 *
 * element {HTML node} HTML DOM 節(jié)點(diǎn)
 * data    {Object}    是傳遞給模板用來(lái)渲染的數(shù)據(jù)
 * html    {string}    編譯后的 html 字符串
 */
var templates = require('templates');
templates.render(element, data).then(function (html) {
    element.innerHTML = html;
});

屬性

type

說(shuō)明：模板引擎類(lèi)型
必選項(xiàng)：是
類(lèi)型：字符串

Mustache 語(yǔ)法

基本使用

- data

{
    name: 'Chris',
    age: '15',
    sex: '<b>female</b>'
}

- Template

<template type="mip-mustache" id="mip-template-id">
<li>name: {{name}}</li>
<li>age: {{age}}</li>
<li>sex: {{sex}}</li>
<li>sex: {{{sex}}}</li>
<li>sex: {{&sex}}</li>
{{=<% %>=}}
<li>sex: {{sex}}</li>
<%={{ }}=%>
</template>

- 編譯后的 html

<li>name: Chris</li>
<li>age: 15</li>
<li>sex: <b>female<&#x2F;b></li>
<li>sex: <b>female</b></li>
<li>sex: </li>
<li>sex: {{sex}}</li>

復(fù)雜data的使用

- data

{
    name: {
        first: 'Michael',
        last: 'Jackson'
    },
    age: '15'
}

- Template

<template type="mip-mustache" id="mip-template-id">
<li>name: {{name.first}} {{name.last}}</li>
<li>age: {{age}}</li>
</template>

- 編譯后的 html

<li>name: Michael Jackson</li>
<li>age: 15</li>

對(duì)象數(shù)組

- data

{
    "stooges": [
        { "name": "Moe" },
        { "name": "Larry" },
        { "name": "Curly" }
    ]
}

- Template

<template type="mip-mustache" id="mip-template-id">
{{#stooges}}
<li>{{name}}</li>
{{/stooges}}
</template>

- 編譯后的 html

<li>Moe</li>
<li>Larry</li>
<li>Curly</li>

一維數(shù)組

- data

{
    musketeers: ["Athos", "Aramis", "Porthos", "D'Artagnan"]
}

- Template

<template type="mip-mustache" id="mip-template-id">
{{#musketeers}}
<li>{{.}}</li>
{{/musketeers}}
</template>

- 編譯后的 html

<li>Athos</li>
<li>Aramis</li>
<li>Porthos</li>
<li>D'Artagnan</li>

循環(huán)函數(shù)

- 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

<template type="mip-mustache" id="mip-template-id">
{{#beatles}}
<li>{{name}}</li>
{{/beatles}}
</template>

- 編譯后的 html

<li>John Lennon</li>
<li>Paul McCartney</li>
<li>George Harrison</li>
<li>Ringo Starr</li>

函數(shù)

- data

{
  "name": "Tater",
  "bold": function () {
    return function (text, render) {
      return "<b>" + render(text) + "</b>";
    }
  }
}

- Template

<template type="mip-mustache" id="mip-template-id">
{{#bold}}Hi {{name}}.{{/bold}}
</template>

- 編譯后的 html

<b>Hi Tater.</b>

空數(shù)組的處理

- data

{
  "repos": []
}

- Template

<template type="mip-mustache" id="mip-template-id">
{{#repos}}<li>{{name}}</li>{{/repos}}
{{^repos}}No repos !!{{/repos}}
</template>

- 編譯后的 html

No repos !!

可以訪(fǎng)問(wèn)Mustache.js 文檔了解更多信息。