Mustache.js Instructions for use

Read Mustache's GitHub, learn the grammar, make a note

1. Simple variable substitution: {{name}}

var data = {"name": "Willy"}; Mustache.render ("{{name}} is awesome.", data);

Returns the result Willy is awesome.

2. If the variable contains HTML code, such as:<br>, <tr> and so on, but do not want to escape can be used in {{&name}}

var data = {"name": "<br>Willy<br>"};        var output = Mustache.render ("{{&name}} is awesome.", data); Console.log (output);

Results:<br>willy<br> is awesome.

The result of removing "&" is escaping to:&lt;br&gt; Willy&lt;br&gt; is awesome. ("<" and ">" are escaped by default)

3. If you are an object, you can also interpret its properties

 var data = {               "Name"  : {                   "First"  :  "Chen",                   "Last"  :  "Jackson"               },               "Age"  : 18         };          var output = mustache.render (                   "Name:{{name.first}} {{name.last} },age:{{age}} ",  data);          console.log (output);

Results: Name:chen jackson,age:18

4.{{#param}} This tag is powerful and has the function of if judgment and foreach.

var data = {"Nothin": true}; var output = Mustache.render ("shown.{ {#nothin}} Never shown!            {{/nothin}} ", data); Console.log (output);

If nothin is empty or null, or FALSE, the shown is output. The opposite is Shown.never shown!.

5. Iteration

 var data = {               "Stooges"  : [ {                   "name"  :  "Moe"               }, {                   "name"  :  "Larry"               }, {                   "name"  :  "Curly"               } ]         };          var output = mustache.render ("{{#stooges}}<b>{{name}} </b>{{/stooges}} ", &NBSP;&NBSp;               data);          console.log (output);

Output:<b>moe</b>

<b>Larry</b>

<b>Curly</b>

6. If the iteration is an array, you can also use {{.}}. To replace each element

var data = {"musketeers": ["Athos", "Aramis", "Porthos", "D ' Artagnan"]}; var output = Mustache.render ("{{#musketeers}}* {{&.}}        {{/musketeers}} ", data); Console.log (output);

Output: * Athos

* Aramis

* Porthos

* D ' Artagnan

7. The output of the iteration can also be the result of a function return, function can read the context of the current variable to get other properties to perform other operations

 var data = {               "Beatles"  : [ {                   "FirstName"  :  "John",                   "LastName"  :  "Lennon"               }, {                   "FirstName"  :  "Paul",                   "LastName"  :  " McCartney "             }, {                   "FirstName"  :   "George",   &NBsp;               "LastName"  :  "Harrison"              }, {                   "FirstName"  :   "Ringo",                   "LastName"  :  "Starr"               } ],              "Name"  :  function ()  {                  return this.firstName +  " "  + this.lastName;              }          };         var output = mustache                  .render ("{{#beatles}} *{{name}}{{ /beatles}} ",  data);          console.log (output);

Output: *john Lennon

*paul McCartney

*george Harrison

*ringo Starr

8: The expression in the variable can be executed in the method

 var data = {               "Name"  :  "{{age}}"  +  "Tater",               "Bold"  : function ()  {                  return function (Text, render)  {                       console.log (text);                      return  "<b>"  + render (text)  +  " </b> ";                  };             },               "Age"  : 18         };          var output = mustache.render ("{{#bold}}hi  {{name}}. {{/bold}} ",  data);          console.log (output);

Output Result:

Hi {{Age}}tater.

<b>hi 18tater.</b>

9.{{^}} In contrast to {{#}}, if the variable is null, undefined, false, and empty array speak output

10.{{! }} Comment

Mustache.js Instructions for use