seo-template 模板

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

　　标题

　　内容

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

　　示例

　　<!--模板引擎类型的组件统一使用`<template>`标签-->

　　<templatetype="mip-mustache">

　　Hello{{world}}!

　　</template>

　　/**

　　*组件脚本代码

　　*

　　*element{HTMLnode}HTMLDOM节点

　　*data{Object}是传递给模板用来渲染的数据

　　*html{string}编译后的html字符串

　　*/

　　vartemplates=require('templates');

　　templates.render(element,data).then(function(html){

　　element.innerHTML=html;

　　});

　　属性

　　type

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

　　Mustache语法

　　基本使用

　　-data

　　{

　　name:'Chris',

　　age:'15',

　　sex:'<b>female</b>'

　　}

　　-Template

　　<templatetype="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>

　　<%=<!--8-->=%>

　　</template>

　　-编译后的html

　　<li>name:Chris</li>

　　<li>age:15</li>

　　<li>sex:&lt;b&gt;female&lt;&#x2F;b&gt;</li>

　　<li>sex:<b>female</b></li>

　　<li>sex:</li>

　　<li>sex:{{sex}}</li>

　　复杂data的使用

　　-data

　　{

　　name:{

　　first:'Michael',

　　last:'Jackson'

　　},

　　age:'15'

　　}

　　-Template

　　<templatetype="mip-mustache"id="mip-template-id">

　　<li>name:{{name.first}}{{name.last}}</li>

　　<li>age:{{age}}</li>

　　</template>

　　-编译后的html

　　<li>name:MichaelJackson</li>

　　<li>age:15</li>

　　对象数组

　　-data

　　{

　　"stooges":[

　　{"name":"Moe"},

　　{"name":"Larry"},

　　{"name":"Curly"}

　　]

　　}

　　-Template

　　<templatetype="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

　　<templatetype="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(){

　　returnthis.firstName+""+this.lastName;

　　}

　　}

　　-Template

　　<templatetype="mip-mustache"id="mip-template-id">

　　{{#beatles}}

　　<li>{{name}}</li>

　　{{/beatles}}

　　</template>

　　-编译后的html

　　<li>JohnLennon</li>

　　<li>PaulMcCartney</li>

　　<li>GeorgeHarrison</li>

　　<li>RingoStarr</li>

　　函数

　　-data

　　{

　　"name":"Tater",

　　"bold":function(){

　　returnfunction(text,render){

　　return"<b>"+render(text)+"</b>";

　　}

　　}

　　}

　　-Template

　　<templatetype="mip-mustache"id="mip-template-id">

　　{{#bold}}Hi{{name}}.{{/bold}}

　　</template>

　　-编译后的html

　　<b>HiTater.</b>

　　空数组的处理

　　-data

　　{

　　"repos":[]

　　}

　　-Template

　　<templatetype="mip-mustache"id="mip-template-id">

　　{{#repos}}<li>{{name}}</li>{{/repos}}

　　{{^repos}}Norepos!!{{/repos}}

　　</template>

　　-编译后的html

　　Norepos!!