Sharing code examples of Mustache syntax for WeChat mini program development

Mustache syntax in wxml in the WeChat applet cannot be ignored, which makes me, who has never done front-end iOS before, confused. . . I checked online. . . Record it.

What is Mustache?

Mustache is a logic-less (light logic) template parsing engine. It is produced to separate the user interface from business data (content). It can generate A document in a specific format, usually a standard HTML document. When you want to call different functions in the same template to render the screen, you can manually judge the parameters passed in when rendering the page, provided that they have been customized.

For example, the code in the wxml of the mini program:

// 这里的{{ }}就是Mustache的语法。
<text>{{userInfo.nickName}}</text>，

Mustache’s template syntax is very simple, just a few:

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

{{keyName}} Several situations

Simple variable replacement: {{name}}

var data = { "name": "weChat" };
  Mustache.render（"{{name}} is excellent."，data）;

  返回 weChat is excellent.

The variable contains the html code,

如：<br>、<tr>等而不想转义，可以在用{{&name}}
var data = {
          "name" : "<br>weChat<br>"
      };
var output = Mustache.render("{{&name}} is excellent.", data);
console.log(output);

返回：<br>weChat<br> is excellent.
去掉"&"的返回是转义为：<br>weChat<br> is excellent.
另外，你也可以用{{{ }}}代替{{&}}。

If it is an object, its properties can also be declared

var data = {
           "name" : {
           "first" : "Chen"，
           "last" : "Jackson"
           }，
           "age" : 18
      };
var output = Mustache.render(
        "name:{{name.first}} {{name.last}}，age:{{age}}", data);
console.log(output);
返回：name:Chen Jackson，age:18

{{#keyName}} {{/keyName}} starts with # and ends with / to indicate a block. It will render the block one or more times based on the key value in the current context. Its function is very powerful, and functions like if and foreach can also be added to it.

var data = {
           "stooges" : [ {
               "name" : "Moe"
           }， {
               "name" : "Larry"
           }， {
               "name" : "Curly"
       };
var output = Mustache.render("{{＃stooges}}<b>{{name}}</b>{{/stooges}}"，
              data);
console.log(output);
返回：<b>Moe</b>
   <b>Larry</b>
   <b>Curly</b>

{{^keyName}} {{/keyName}} Exception output

This syntax is the same as {{#keyName}} {{/keyName} }Similar, the difference is that it only renders and outputs the content of the block when the keyName value is null, undefined, or false. For example:

var data = {
             "name" : "<br>weChat<br>"
         };
    var tpl = ‘{{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}}’;
    var output = Mustache.render(tpl, data);
返回：没找到 nothing 键名就会渲染这段

{{.}} represents an enumeration, which is used to loop out the entire array, for example:

var data = {
    "product": ["Macbook ","iPhone ","iPod ","iPad "]
    }
    var tpl = &#39;{{#product}} <p>{{.}}</p> {{/product}}&#39;;
    var html = Mustache.render(tpl, data);
返回：<p>Macbook </p> <p>iPhone </p> <p>iPod </p> <p>iPad </p>

{{! }} represents the comment

 {{!这里是注释}}

{{>partials}}

Start with > to indicate submodules. When the structure is complex, we can use this syntax to split the complex structure into several small submodules.

 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); 
   //输出： 
   <h1>xiaohua</h1>

{{{data}}}

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

 var tpl = &#39;{{#msg}} <p>{{{age}}}</p> {{/msg}}&#39;
 //输出：
 <p>22</p>

small There are so many programs that you can use for the most part. If you find anything else, I will update it. . .

The above is the detailed content of Sharing code examples of Mustache syntax for WeChat mini program development. For more information, please follow other related articles on the PHP Chinese website!