template template

template template encapsulates the third-party template engine Mustache.js, you can visit the Mustache.js documentation for more information. This component currently only supports assisting other components to complete template rendering work, and will not render when used directly.

Example

<!-- 模板引擎类型的组件统一使用 `<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;
});

Attributes

type

Description: Template engine type
Required option: Yes
Type: String

Mustache syntax

Basic Use

- 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>

Use of complex 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>

Object array

- 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>

One-dimensional array

- 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>

Loop function

- 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>

Function

- 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>

Handling of empty arrays

- data

{
  "repos": []
}

- Template

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

- 编译后的 html

No repos !!

You can visit the Mustache.js documentation for more information.