专注SEO、SEM、百度排名、快速提升权重、关键字优化、网络推广,seo莫然可以分享移动手机端SEO知识!免费提供网站优化诊断。 
 莫然博客是山东省最主流,最具人气的莫然seo博客频道。专注SEO、SEM、百度排名、快速提升权重、关键字优化、网络推广,seo莫然可以分享移动手机端SEO知识!免费提供网站优化诊断。

seo-template 模板

作者:seo , 分类:seo实战技术 , 浏览:6158 , 评论:0

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


  


莫然博客是山东省最主流,最具人气的莫然seo博客频道。专注SEO、SEM、百度排名、快速提升权重、关键字优化、网络推广,seo莫然可以分享移动手机端SEO知识!免费提供网站优化诊断。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

额 本文暂时没人评论 来添加一个吧
SEO_山东SEO_网站优化_网络推广