Mustache template for constructing HTML page content

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

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

...
<script type= "Text/javascript" src= "Mustache.js" ></script>
<script type= "Text/javascript" >
var data = {
"Name": "Xiaohua",
"MSG": {
"Sex": "Female",
"Age": "22",
"Hobit": "Reading"
},
"Subject": ["Ch", "En", "Math", "physics"]
}

var tpl = ' <p> {{name}}</p> ';
var html = Mustache.render (TPL, data);

alert (HTML);
</script>
...

{{Data}}

{{}}Is the mustache identifier, the data in curly braces represents the key name, which is the function of directly outputting the key value that matches the key name, for example:

var tpl = ' {{name}} '; var html = Mustache.render (TPL, data); Output: Xiaohua

{{#data}} {{/data}}

To # begin and / end a chunk, it renders one or more chunks of the chunk based on the key values in the current context, such as rewriting the TPL in the Demo:

var tpl = ' {{#msg}} <p>{{sex}},{{age}},{{hobit}}</p> {{/msg}} '; var html = Mustache.render (TPL, data);  Output: <p> female, reading</p>
Note: If {{#data}} {{/data}} the data value in is null, undefined, false, no output is rendered.

{{^data}} {{/data}}

The syntax {{#data}} {{/data}} is different from the similar, except that it is rendered when the data value is null, undefined, and false to output the chunk content.

1 var tpl = {{^nothing}} does not find the Nothing key name will render this paragraph {{/nothing}};2 var html = mustache.render (TPL, data); 3//output: 4 No key name will be found Render this paragraph

{{.}}

{{.}}Represents an enumeration that can loop through an entire array, for example:

1 var tpl = ' {#subject}} <p>{{.}} </p> {{/subject}} '; 2 var html = Mustache.render (TPL, data); 3//output: 4 <p>Ch</p> <p>En</p> & Lt;p>math</p> <p>physics</p>

{{>partials}}

To > begin to represent submodules, such as {{> msg}}; When the structure is complex, we can use this syntax to split a complex structure into several small sub-modules, such as:

var TPL = "var partials = {msg: "{{#msg}}<li>{{sex}}</li><li>{{age}}</li><li>{{hobit}}</li >{{/MSG}
var html = Mustache.render (TPL, data, partials);
Output:
<ul>
<li>female</li>
<li>22</li>
<li>reading</li>
</ul>

{{{data}}}

{{data}}The output will translate such special characters, if you want to keep the content as-is output can be used {{{}}} , for example:

1 var tpl = ' {{#msg}} <p>{{{age}}}</p> {{/msg}} ' 2//output: 3 <p>22</p>

{{!comments}}

!Represents a comment and does not render any output after the comment.

1 {{! Here is the comment}}2//output:

Mustache template for constructing HTML page content