テンプレート テンプレート

template テンプレートは、サードパーティのテンプレート エンジン Mustache.js をカプセル化します。詳細については、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;
});

属性

タイプ

説明: テンプレートエンジンタイプ
必須: はい
タイプ: String

マスタッシュ構文

基本的な使い方

- 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

{
    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 ドキュメント を参照してください。