MIP工具接口template 模板

文章目录[隐藏]

示例

<!-- 模板引擎类型的组件统一使用 `<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 文档了解更多信息。


发布日期:

所属分类: 网站运营 SEO 标签: