mustache:web模板引擎

mustache简介

Mustache 是一个 logic-less (轻逻辑)模板剖析引擎,它的上风在于能够运用在 Javascript、PHP、Python、Perl 等多种编程言语中。这里主假如看JavaScript中的运用。Javascript 言语的模板引擎,现在盛行有 Mustache、Hogan、doT.js、JsRender、Kendo UI Templates等,

Mustache 的模板语法很简单,就那末几个:

{{keyName}}
{{#keyName}} {{/keyName}}
{{^keyName}} {{/keyName}}
{{.}}
{{<partials}}
{{{keyName}}}
{{!comments}}

下面看看mustache.js的运用,github地点: https://github.com/janl/musta…

运用要领

这里看看疾速运用:

var view = {
  title: "Joe",
  calc: function () {
    return 2 + 4;
  }
};

var output = Mustache.render("<p>{{title}} spends {{calc}}</p>", view);

这个直观的熟悉就是:写一段字符串,能够是和html文档一样的字符串模板,然后依据mustache的誊写规则将须要处置惩罚的数据对象经由过程衬着要领注入,构成一个须要的html文本,就能够是运用innerHTML或许$.html之类的要领放到页面中。

变量

mustache的模板就是一段字符串,内里编写了恣意多的mustache tags,都是运用 {{key}} 来举行占位,假如衬着数据没有对应的数据就会衬着为空,须要注重的是{{}}如许誊写是不会html转译的,衬着数据内里誊写的html标签会被转化为实体,能够运用{{{}}}或许{{&name}},假如不想{{}}被mustache剖析衬着的话能够运用 {{=<% %>=}} {{key}} <%={{ }}=%> 将疏忽出包起来。

View:

{
  "name": "Chris",
  "company": "<b>GitHub</b>"
}
Template:

* {{name}}      //* Chris
* {{age}}       //* 
* {{company}}   //* &lt;b&gt;GitHub&lt;/b&gt;
* {{{company}}}  //* <b>GitHub</b>
* {{&company}}  //* <b>GitHub</b>
{{=<% %>=}}
* {{company}}  //* {{company}}
<%={{ }}=%>

JavaScript’s dot notation may be used to access keys that are properties of objects in a view.

View:

{
  "name": {
    "first": "Michael",
    "last": "Jackson"
  },
  "age": "RIP"
}
Template:

* {{name.first}} {{name.last}}
* {{age}}
Output:

* Michael Jackson
* RIP

区块

区块内的部份能够会被衬着一次或许屡次,依据模板中的详细展现,区块同样是运用两个tag标志肇端和完毕,{{#key}} {{/key}}
If the person key does not exist, or exists and has a value of null, undefined, false, 0, or NaN, or is an empty string or an empty list, the block will not be rendered.
也就是说假如假如块区的值对应的是null、undefined、false、0、NaN、空字符串、空数组,这个块区是不会衬着的,假如是数组就会以下:

View:

{
  "stooges": [
    { "name": "Moe" },
    { "name": "Larry" },
    { "name": "Curly" }
  ]
}
Template:

{{#stooges}}      //<b>Moe</b>
<b>{{name}}</b>   //<b>Larry</b>
{{/stooges}}      //<b>Curly</b>

假如块区是要展现一个字符串数组,能够斟酌运用{{.}}来完成轮回衬着,

{{#musketeers}}
* {{.}}
{{/musketeers}}

块区以至能够直接运用function来举行数据的处置惩罚

View:
{
  "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:
{{#beatles}}
* {{name}}
{{/beatles}}

Output:
* John Lennon
* Paul McCartney
* George Harrison
* Ringo Starr

另有块区的key直接就是function的时刻,这个看起来好高等,我也没太邃晓,平常不会这么写吧。

If the value of a section key is a function, it is called with the section's literal block of text, un-rendered, as its first argument. The second argument is a special rendering function that uses the current view as its view argument. It is called in the context of the current view object.

View:

{
  "name": "Tater",
  "bold": function () {
    return function (text, render) {
      return "<b>" + render(text) + "</b>";
    }
  }
}
Template:

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

<b>Hi Tater.</b>

反转块区

这个和块区更像是一个组合,对应 if else这类状况,块区着实key有内容的时刻来举行衬着,反转块区恰恰相反,在没有内容的时刻来举行衬着,这也很相符web开辟的情形,

View:

{
  "repos": []
}
Template:

{{#repos}}<b>{{name}}</b>{{/repos}}
{{^repos}}No repos :({{/repos}}
Output:

No repos :(

其他 解释、子模块

Comments begin with a bang and are ignored. The following template:
<h1>Today{{! ignore me }}.</h1>
Will render as follows:
<h1>Today.</h1>
{{!comment}} 这就是解释了

子模块就是当衬着的数据比较的庞杂的时刻就能够斟酌运用分割来举行部份一快一块的衬着,{{> block}}
这里须要注重衬着挪用的要领和之前不一样了,须要末了带上block这个区块的衬着内容

For example, this template and partial:

base.mustache:
<h2>Names</h2>
{{#names}}
  {{> user}}
{{/names}}

user.mustache:
<strong>{{name}}</strong>
Can be thought of as a single, expanded template:

<h2>Names</h2>
{{#names}}
  <strong>{{name}}</strong>
{{/names}}
In mustache.js an object of partials may be passed as the third argument to Mustache.render. The object should be keyed by the name of the partial, and its value should be the partial text.

Mustache.render(template, view, {
  user: userTemplate
});

参考:https://github.com/janl/musta…
http://www.iinterest.net/2012…

    原文作者:caoweiju
    原文地址: https://segmentfault.com/a/1190000009438099
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞