WeChat ミニプログラム開発用の Mustache 構文のコード例を共有する

WeChat ミニプログラムの wxml の Mustache 構文は無視できず、これまで iOS のフロントエンドをやったことがない私は混乱してしまいます。 。 。オンラインで調べました。 。 。それを記録しなさい。

Mustache とは何ですか?

Mustache はロジックレス (軽量ロジック) テンプレート解析エンジンで、ユーザー インターフェイスをビジネス データ (コンテンツ) から分離するために作成され、特定の形式 (通常は標準 HTML) でドキュメントを生成できます。書類。同じテンプレート内の異なる関数を呼び出して画面をレンダリングする場合、カスタマイズされていれば、ページのレンダリング時に渡されるパラメーターを手動で判断できます。

たとえば、ミニ プログラムの wxml 内のコード:

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

Mustache のテンプレート構文は非常に単純で、ほんの一部です:

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

{{keyName}} いくつかの状況

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

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

  返回 weChat is excellent.

変数には HTML コードが含まれています

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

オブジェクトの場合は、その属性も宣言できます

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}} は # で始まり / で終わります。ブロックを 1 回以上レンダリングするのは、コンテキスト内の現在の Key 値に基づいています。その関数は非常に強力で、if や foreach などの関数も追加できます。

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}} 例外出力

この構文は {{#keyName}} {{/keyName}} に似ていますが、異なる点は keyName の値がnull、unknown の場合、ブロックの内容は false の場合にのみレンダリングおよび出力されます。例:

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

{{.}} は配列全体をループするために使用される列挙を表します。 例:

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>

{{! }} はコメント

 {{!这里是注释}}

{{>partials}} を表します。

、サブモジュールから始めて、構造が複雑な場合、この構文を使用して複雑な構造をいくつかの小さなサブモジュールに分割できます。

 var tpl = "<h1 id="namme">{{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 id="xiaohua">xiaohua</h1>

{{{data}}}

{{data}} 出力では他の特殊文字が変換されます。内容をそのままにしたい場合は、{{{}}}、

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

を使用できます。使用できる小さなプログラムがたくさんあります。他に何か見つけたら更新します。 。 。

以上がWeChat ミニプログラム開発用の Mustache 構文のコード例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。