Mustache syntax

mustache grammar

mustache Templates , Is used to construct html The page content . In practice , When you want to call different functions in the same template to render the picture , On the premise that it has been customized , You can manually judge the parameters passed in when rendering the page .【 In case of bad judgment , We can judge by changing the incoming parameters 】 Let me see the syntax of the template with Xiaobai .

Mustache The template syntax of is very simple , Just a few ：

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

With the help of Demo Let's give a brief introduction to grammar ：

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

Namely Mustache Identifier for , In curly brackets data Indicates the key name , The function of this sentence is to directly output the key value that matches the key name , for example ：

 var tpl = '{
   {name}}';
 var html = Mustache.render(tpl, data);
 // Output ：
 xiaohua

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

With # Start 、 With / End means block , If msg If it's worth it ( loop ) Rendering , For example, rewrite Demo Medium tpl：

var tpl = '{
   {#msg}} <p>{
   {sex}},{
   {age}},{
   {hobit}}</p> {
   {/msg}}';
var html = Mustache.render(tpl, data);

// Output ：
<p> female, 22, reading</p>

Be careful ： If { {#data}} { {/data}} Medium data The value is null, undefined, false; No rendering output .

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

This grammar is related to { {#data}} { {/data}} contrary , It's when data The value is null, undefined, false The content of the block will be rendered and outputted .

 var tpl = {
   {^nothing}} Did not find  nothing  The key name will render this {
   {/nothing}};
 var html = Mustache.render(tpl, data);
 // Output ：
  Did not find  nothing  The key name will render this 

• { {.}}

{ {.}} Represents enumeration , You can loop through the entire array , for example ：

 var tpl = '{
   {#subject}} <p>{
   {.}}</p> {
   {/subject}}';
 var html = Mustache.render(tpl, data);
 // Output ：
 <p>Ch</p> <p>En</p> <p>Math</p> <p>physics</p>

• { {>partials}}

With > Start with the submodule , Such as { {> msg}}; When the structure is complex , We can use this syntax to split a complex structure into several small submodules , for example ：

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

• { { {data}}}

{ {data}} The output will translate special characters such as , If you want to keep the content as it is, you can use { { {data}}}, for example ：

 var tpl = '{
   {#msg}} <p>{
   {
   {age}}}</p> {
   {/msg}}'
 // Output ：
 <p>22</p>

• { { !comments}}

! Notation , Nothing will be rendered after annotation .

{
   { ! Here are the notes }}

// Output ：

At work , If the content on the page is obtained from the background and rendered to the page , We can use mustache The template , It is worth noting that ,render The data of must match the key name .