Detaillierte Einführung in die Mustache-Syntax des WeChat-Applets

Detaillierte Erklärung der Mustache-Syntax des WeChat-Miniprogramms

Das WeChat-Miniprogramm erfreut sich in letzter Zeit großer Beliebtheit, was für Front-End-Entwicklungsprogrammierer eine gute Nachricht ist. Hier zeichnen wir hauptsächlich die Mustache-Syntax des WeChat-Miniprogramms auf.

Mustache-Syntax wird in WXML für die Entwicklung kleiner Programme verwendet. Daher ist es sehr wichtig, den Schnurrbart zu studieren.

Was ist Moustache? ist eine logiklose (leichte Logik-)Vorlagen-Parsing-Engine. Sie wird entwickelt, um die Benutzeroberfläche von Geschäftsdaten (Inhalt) zu trennen. Sie kann Dokumente in einem bestimmten Format generieren ist ein Standard-HTML-Dokument. Zum Beispiel der Code im WXML des Miniprogramms:

{{userInfo.nickName}}, wobei {{ }} die Syntax von Moustache ist.

1. Die Vorlagensyntax von Moustache ist sehr einfach, nur ein paar: {#keyName}} {{/keyName}}

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

{{.}}

{{ Kommentare }}

{{>Partials}}

1. {{keyName}}

⑴ Einfache Variablenersetzung: {{name}}

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

Mustache.render("{{name}} ist ausgezeichnet.", data);

return weChat ist ausgezeichnet

⑵ Die Variable enthält HTML-Code, wie zum Beispiel:

usw. Wenn Sie nicht entkommen möchten, können Sie {{&name}}

gibt Folgendes zurück:

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

weChat

ist ausgezeichnet.

Die Rückgabe ohne „&“ wird wie folgt maskiert:

weChat

ist ausgezeichnet.

Außerdem können Sie auch {{{ }}} anstelle von {{&}} verwenden.

⑶ Wenn es sich um ein Objekt handelt, kann es auch seine Eigenschaften deklarieren

Rückgabe: Name: Chen Jackson, Alter: 18

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

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

Beginnen Sie mit # und enden Sie mit /, um einen Block anzugeben. Es werden eine oder mehrere Operationen für den Block ausgeführt der Schlüsselwert im aktuellen Kontext. Rendering-Zeiten. Es ist sehr leistungsfähig und verfügt über ähnliche Funktionen wie if und foreach.

Return: Moe

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

Larry

Curly

3 }} {{/keyName}}

Diese Syntax ähnelt {{#keyName}} {{/keyName}}. Der Unterschied besteht darin, dass der Bereich nur gerendert und ausgegeben wird, wenn der keyName-Wert null ist. undefiniert oder falsch. Zum Beispiel:

Rückgabe: Wenn kein Schlüsselname gefunden wird, wird dieser Abschnitt gerendert

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

4, {{.} }

{{.}} stellt eine Aufzählung dar, die das gesamte Array in einer Schleife ausgeben kann, zum Beispiel:

gibt zurück:

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

Macbook

iPod

iPad

5. {{! }} bedeutet Kommentar

6. {{>Partials }}

beginnt mit >, um Submodule darzustellen. Wenn die Struktur komplex ist, können wir diese Syntax verwenden, um die komplexe Struktur in mehrere kleine Submodule aufzuteilen.