WeChat アプレットの Mustache 構文の詳細な紹介

WeChat ミニ プログラム Mustache 構文の詳細な説明

WeChat ミニ プログラムは最近非常に人気があり、フロントエンド開発プログラマーにとって朗報です。ここでは主に WeChat ミニ プログラム Mustache 構文を記録します。

Mustache 構文は、小規模なプログラム開発のために wxml で使用されます。したがって、Mustacheを勉強することが非常に必要です。

Mustache とは何ですか? Mustache は、ユーザー インターフェイスをビジネス データ (コンテンツ) から分離するために作成されたロジックレス (ライト ロジック) テンプレート解析エンジンで、特定の形式 (通常は標準の HTML ドキュメント) でドキュメントを生成できます。たとえば、ミニ プログラムの wxml 内のコード:

{{userInfo.nickName}}。ここで、{{ }} は Mustache の構文です。

1. Mustache のテンプレート構文は非常にシンプルで、ほんの一部です:

{{keyName}}

{{{keyName}}}

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

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

{{.}}

{{!comments}}

{{>部分}}

1, {{keyName}}

⑴ 単純な変数置換 :{ {name}}

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

Mustache.render("{{name}} は素晴らしいです。", data);

return weChat は素晴らしいです。

⑵ If変数には、

などの HTML コードが含まれています。エスケープせずに、{{&name}}

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

Return:

weChat
は優れています。

「&」を削除してください。戻り値は次のようにエスケープされます:

weChat
is Excellent.

さらに、{{&}} の代わりに {{{ }}} を使用することもできます。

⑶ オブジェクトの場合は、そのプロパティを宣言することもできます

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、年齢: 18

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

# で始まり / で終わるブロックは、現在のコンテキストのキー値に基づいてブロックを 1 回以上レンダリングすることを示します。これは非常に強力で、if や foreach と同様の機能を備えています。

rreee

rturn：moe

違いは、keyname値がnull、未定義、またはfalseの場合にのみレンダリングして出力することです。例:

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

Return: 何も見つからない場合、キー名がレンダリングされます。{{.}}

{{.}} は配列全体を出力できます。ループ内で例:

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

Return:

Macbook

iPhone

iPod

iPad

5, {{! }} は注釈を示します

6, {{>partials}}

> エクスプレッサー モジュールで始まり、構造が複雑な場合、この構文を使用して複雑な構造をいくつかの小さなサブモジュールに分割できます。