Original address: http://www.iinterest.net/2012/09/12/web-template-engine-mustache/

Web template engine is designed to separate user interface from business data (content). It can generate documents in a specific format, usually standard HTML documents. Of course, different development languages have different template engines, such as Hogan under Javascript, aspTemplate under ASP, and Smarty under PHP. This paper mainly introduces the template engine based on Javascript. At present, there are Mustache, Hogan, doT.js, JsRender, Kendo popular. UI Templates, etc. jsperf.com We can see their performance comparisons. First of all, let's introduce them. Mustache.

Introduction to Mustache:

Mustache is a logic-less (light logic) template parsing engine. Its advantage is that it can be used in Javascript, PHP, Python, Perl and other programming languages.

2. Mustache grammar:

Mustache's template syntax is simple, just a few:

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

This article will take the javascript application as an example to introduce, first look at Demo:

<script type="text/javascript" src="mustache.js"></script>
<script type="text/javascript">
var data = {
    "company": "Apple",
    "address": {
        "street": "1 Infinite Loop Cupertino</br>",
        "city": "California ",
        "state": "CA ",
        "zip": "95014 "
    },
    "product": ["Macbook ","iPhone ","iPod ","iPad "]
}

var tpl = '<h1>Hello {{company}}</h1>';
var html = Mustache.render(tpl, data);

console.log( html )
</script>
...

//Console output after running:

<h1>Hello Apple</h1>

In Demo, you can see that data is data, TPL is a defined template, and Mustache.render(tpl, data) method is used to render the final HTML code output.

Demo is a simple introduction to grammar.

{{keyName}}

The {}} is the Mustache identifier, and the keyName in curly brackets represents the key name. The purpose of this sentence is to directly output the key value matching the key name, for example:

var tpl = '{{company}}';
var html = Mustache.render(tpl, data);
//Output:
Apple

{{#keyName}} {{/keyName}}

Blocks start with # and end with / are rendered one or more times depending on the key value in the current context, such as rewriting tpl in Demo:

var tpl = '{{#address}} <p>{{street}},{{city}},{{state}}</p> {{/address}}';
var html = Mustache.render(tpl, data);

//Output:
<p>1 Infinite Loop Cupertino</br>,California,CA</p>

{{^keyName}} {{/keyName}}

This syntax is similar to {{keyName} {keyName} {/ keyName}}, except that it renders the output of the block when the keyName value is null, undefined, false.

Var TPL ='{nothing}} renders this {nothing} if the nothing key name is not found.
var html = Mustache.render(tpl, data);
/ / output:
If you don't find the nothing key name, you'll render it.

Enumeration

{{.}} denotes enumeration and can output the entire array in a loop, such as:

var tpl = '{{#product}} <p>{{.}}</p> {{/product}}';
var html = Mustache.render(tpl, data);
//Output:
<p>Macbook </p> <p>iPhone </p> <p>iPod </p> <p>iPad </p>

{{>partials}}

Submodules are represented as {address} starting with >; when the structure is complex, we can use this grammar to split the complex structure into several small sub-modules, for example:

var tpl = '<h1>{{company}}</h1> <ul>{{>address}}</ul>';
var partials = {address: "{{#address}}<li>{{street}}</li><li>{{city}}</li><li>{{state}}</li><li>{{zip}}</li>{{/address}}"}
var html = Mustache.render(tpl, data, partials);
//Output:
<h1>Apple</h1>
<ul><li>1 Infinite Loop Cupertino</br></li><li>California</li><li>CA</li><li>95014</li></ul>

{{{keyName}}}

The {{keyName} output translates special characters such as these. If you want to keep the output as it is, you can use {{}} for example:

var tpl = '{{#address}} <p>{{{street}}}</p> {{/address}}';
//Output:
<p>1 Infinite Loop Cupertino</br></p>

{{!comments}}

Represents a comment, which does not render any output.

{{Here's the comment}} ____________
/ / output: