template 模板


template 範本封裝了第三方範本引擎 Mustache.js，可以存取Mustache.js 文件了解更多資訊。本元件暫時只支援輔助其他元件完成模板渲染工作，直接使用不會渲染。

標題內容
# 腳本



https://mipcache.bdstatic.com/static/v1/mip-mustache/mip-mustache.js

#範例

<!-- 模板引擎类型的组件统一使用 `<template>` 标签 -->
<template type="mip-mustache">
Hello {{world}}!
</template>

/**
 * 组件脚本代码
 *
 * 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: '<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>
###複雜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>
###物件數組###
- 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>
###一維數組###
- 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>
###循環函數###
- 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>
###函數## #
- 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>
###空數組的處理###
- data

{
  "repos": []
}

- Template

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

- 编译后的 html

No repos !!
###可以存取###Mustache.js 文件###了解更多資訊。 ######