template 模板封装了第三方模板引擎 Mustache.js，可以访问Mustache.js 文档了解更多信息。本组件暂时只支持辅助其他 MIP 组件完成模板渲染工作，直接使用不会渲染。个性化 MIP 组件需要按照MIP组件开发规范封装。

标题 内容
所需脚本 https://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js

示例

  1. <!-- 模板引擎类型的组件统一使用 `<template>` 标签 -->
  2. <template type="mip-mustache">
  3. Hello {{world}}!
  4. </template>
  6. /**
  7.  * 组件脚本代码
  8.  *
  9.  * element {HTML node} HTML DOM 节点
  10.  * data    {Object}    是传递给模板用来渲染的数据
  11.  * html    {string}    编译后的 html 字符串
  12.  */
  13. var templates = require('templates');
  14. templates.render(element, data).then(function (html) {
  15.     element.innerHTML = html;
  16. });

属性

type

说明：模板引擎类型
必选项：是
类型：字符串

Mustache 语法

基本使用

  1. - data
  3. {
  4.     name: 'Chris',
  5.     age: '15',
  6.     sex: '<b>female</b>'
  7. }
  9. - Template
  11. <template type="mip-mustache" id="mip-template-id">
  12. <li>name: {{name}}</li>
  13. <li>age: {{age}}</li>
  14. <li>sex: {{sex}}</li>
  15. <li>sex: {{{sex}}}</li>
  16. <li>sex: {{&sex}}</li>
  17. {{=<% %>=}}
  18. <li>sex: {{sex}}</li>
  19. <%={{ }}=%>
  20. </template>
  22. - 编译后的 html
  24. <li>name: Chris</li>
  25. <li>age: 15</li>
  26. <li>sex: &lt;b&gt;female&lt;&#x2F;b&gt;</li>
  27. <li>sex: <b>female</b></li>
  28. <li>sex: </li>
  29. <li>sex: {{sex}}</li>

复杂data的使用

  1. - data
  3. {
  4.     name: {
  5.         first: 'Michael',
  6.         last: 'Jackson'
  7.     },
  8.     age: '15'
  9. }
  11. - Template
  13. <template type="mip-mustache" id="mip-template-id">
  14. <li>name: {{name.first}} {{name.last}}</li>
  15. <li>age: {{age}}</li>
  16. </template>
  18. - 编译后的 html
  20. <li>name: Michael Jackson</li>
  21. <li>age: 15</li>

对象数组

  1. - data
  3. {
  4.     "stooges": [
  5.         { "name": "Moe" },
  6.         { "name": "Larry" },
  7.         { "name": "Curly" }
  8.     ]
  9. }
  11. - Template
  13. <template type="mip-mustache" id="mip-template-id">
  14. {{#stooges}}
  15. <li>{{name}}</li>
  16. {{/stooges}}
  17. </template>
  19. - 编译后的 html
  21. <li>Moe</li>
  22. <li>Larry</li>
  23. <li>Curly</li>

一维数组

  1. - data
  3. {
  4.     musketeers: ["Athos", "Aramis", "Porthos", "D'Artagnan"]
  5. }
  7. - Template
  9. <template type="mip-mustache" id="mip-template-id">
  10. {{#musketeers}}
  11. <li>{{.}}</li>
  12. {{/musketeers}}
  13. </template>
  15. - 编译后的 html
  17. <li>Athos</li>
  18. <li>Aramis</li>
  19. <li>Porthos</li>
  20. <li>D'Artagnan</li>

循环函数

  1. - data
  3. {
  4.     "beatles": [
  5.         { "firstName": "John", "lastName": "Lennon" },
  6.         { "firstName": "Paul", "lastName": "McCartney" },
  7.         { "firstName": "George", "lastName": "Harrison" },
  8.         { "firstName": "Ringo", "lastName": "Starr" }
  9.     ],
  10.     "name": function () {
  11.         return this.firstName + " " + this.lastName;
  12.     }
  13. }
  15. - Template
  17. <template type="mip-mustache" id="mip-template-id">
  18. {{#beatles}}
  19. <li>{{name}}</li>
  20. {{/beatles}}
  21. </template>
  23. - 编译后的 html
  25. <li>John Lennon</li>
  26. <li>Paul McCartney</li>
  27. <li>George Harrison</li>
  28. <li>Ringo Starr</li>

函数

  1. - data
  3. {
  4.   "name": "Tater",
  5.   "bold": function () {
  6.     return function (text, render) {
  7.       return "<b>" + render(text) + "</b>";
  8.     }
  9.   }
  10. }
  12. - Template
  14. <template type="mip-mustache" id="mip-template-id">
  15. {{#bold}}Hi {{name}}.{{/bold}}
  16. </template>
  18. - 编译后的 html
  20. <b>Hi Tater.</b>

空数组的处理

  1. - data
  3. {
  4.   "repos": []
  5. }
  7. - Template
  9. <template type="mip-mustache" id="mip-template-id">
  10. {{#repos}}<li>{{name}}</li>{{/repos}}
  11. {{^repos}}No repos !!{{/repos}}
  12. </template>
  14. - 编译后的 html
  16. No repos !!

可以访问Mustache.js 文档了解更多信息。