Detailed introduction to WeChat applet Mustache syntax

WeChat mini program Mustache syntax detailed explanation

WeChat mini program has become very popular recently, which is good news for front-end development programmers. Here we mainly record the WeChat mini program Mustache syntax.

Mustache syntax is used in wxml for small program development. Therefore, it is very necessary to study Mustache.

What is Mustache? Mustache is a logic-less (light logic) template parsing engine, which is produced to separate the user interface from business data (content). It can generate documents in a specific format, usually standard HTML document. For example, the code in the wxml of the mini program:

{{userInfo.nickName}}, where {{ }} is the syntax of Mustache.

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

{{keyName}}

{{{keyName}}}

{{#keyName}} {{/keyName}}

{{ ^keyName}} {{/keyName}}

{{.}}

{{!comments}}

{{>partials}}

1, {{keyName}}

⑴ Simple variable substitution ：{{name}}

var data = { "name": "weChat" };

Mustache.render("{{name}} is excellent.", data);

return weChat is excellent.

⑵ If the variable contains html code, such as:

, etc. without escaping, you can use {{&name}}

var data = {
 
       "name" : "
weChat
"
 
     };
 
var output = Mustache.render("{{&name}} is excellent.", data);
 
console.log(output);

Return:

weChat
is excellent.

Remove the "&" The return is escaped as:

weChat
is excellent.

In addition, you can also use {{{ }}} instead of {{&}}.

⑶ If it is an object, it can also declare 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);

Return: name: Chen Jackson, age: 18

2. {{#keyName}} {{/keyName}}

Start with #, Ending with / indicates a block, which renders the block one or more times based on the key value in the current context. It is very powerful and has functions similar to if and foreach.

var data = {
 
       "stooges" : [ {
 
         "name" : "Moe"
 
       }， {
 
         "name" : "Larry"
 
       }， {
 
         "name" : "Curly"
 
       } ]
 
     };
 
  
 
var output = Mustache.render("{{＃stooges}}{{name}}{{/stooges}}"，
 
         data);
 
console.log(output);

Return: Moe

Larry

Curly

3, {{^keyName}} {{/keyName}}

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

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

Return: If nothing is found, the key name will be rendered.

4. {{.}}

{{.}} represents an enumeration, which can output the entire array in a loop, for example:

var data = {
 
  "product": ["Macbook ","iPhone ","iPod ","iPad "]
 
  }
 
  var tpl = '{{#product}}
 
{{.}}
 
{{/product}}';
 
  
 
  var html = Mustache.render(tpl, data);

Return:

Macbook

iPhone

iPod

iPad

5, {{! }} indicates annotation

6, {{>partials}}

starts with > expressor Module, when the structure is complex, we can use this syntax to split the complex structure into several small sub-modules.