Sharing code examples of Mustache syntax for WeChat mini program development-Mini Program Development-php.cn

Sharing code examples of Mustache syntax for WeChat mini program development

黄舟

Release： 2017-04-18 10:26:55

Original

2165 people have browsed it

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

Copy after login

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

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

Copy after login

{{keyName}} Several situations

Simple variable replacement: {{name}}

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

  返回 weChat is excellent.

Copy after login

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.
另外，你也可以用{{{ }}}代替{{&}}。

Copy after login

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

Copy after login

{{#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>

Copy after login

{{^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 键名就会渲染这段

Copy after login

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

Copy after login

{{! }} represents the comment

 {{!这里是注释}}

Copy after login

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>

Copy after login

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

Copy after login

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!