템플릿 템플릿

템플릿 템플릿은 타사 템플릿 엔진 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;
});

Attribute

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

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

1차원 배열

- 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 문서 를 참조하세요.