軽量JavaScriptテンプレートエンジンmustache.jsコードの使用方法の詳細な説明

軽量JavaScriptテンプレートエンジンMustache.jsの使い方を詳しく説明します。

簡単な例

function show(t) {
 $("#content").html(t);
}
var view = {
 title: 'YZF',
 cacl: function () {
 return 6 + 4;
 }
};
$("#content").html(Mustache.render("{{title}} spends {{cacl}}", view));

Mustache テンプレートの構文をはっきりと見ることができます。これを含めるには {{ と }} を使用し、その中にオブジェクトの名前を入力するだけです。

この例から、指定された属性が関数の場合、その関数の内容は出力されず、その関数が最初に実行されてから返された結果が表示されることもわかります。

HTML タグをエスケープしないでください

var view = {
 name: "YZF",
 company: "<b>ninesoft</b>"
};
show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));

この例から、Mustache はデフォルトで値内の HTML タグをエスケープすることがわかりますが、必要ない場合もあります。

ここで、{{{ と }}} を使用してインクルードするか、{{ と }} を使用してインクルードすると、Mustache は内部の HTML タグをエスケープしません。

サブプロパティの値をバインドする

var view = {
 "name": {
 first: "Y",
 second: "zf"
 },
 "age": 21
};
show(Mustache.render("{{name.first}}{{name.second}} age is {{age}}", view));

最初の例を見たときに、頑張って読めばサブプロパティをバインドできるかどうか考える人がいると思います。おめでとうございます。ニーズを解決するには、 を通じてサブプロパティを使用するだけです。

指定された部分をレンダリングするかどうかの条件選択

var view = {
 person: false
};
show(Mustache.render("eff{{#person}}abc{{/person}}", view));

与えた値に基づいて特定の部分をレンダリングするかどうかを決定できる必要がある場合、この問題は解決できます。もちろん、プロンプトが表示されます。指定された部分がレンダリングされない原因となるのは false だけではありません。

null、空の配列、0、空の文字列も同様に有効です。構文は比較的単純で、{{#key}} ... {{/key}} を使用して中間のコンテンツを制御するだけです。

ループ出力

var view = {
 stooges: [
 { "name": "Moe" },
 { "name": "Larry" },
 { "name": "Curly" }
 ]
};
show(Mustache.render("{{#stooges}}{{name}}<br />{{/stooges}}", view));

上記の方法を覚えれば、ほとんどの問題は解決しますが、それでも問題が発生するのがループ出力です。もちろん、Mustache は私たちを失望させません。ここでは、オブジェクトで構成される配列を出力する場合、{ の代わりに {{.}} を使用する必要があります。 {名前} }。

ループは、指定された関数による処理後に返された値を出力します

var view = {
 "beatles": [
 { "firstname": "Johh", "lastname": "Lennon" },
 { "firstname": "Paul", "lastname": "McCartney" }
 ],
 "name": function () {
 return this.firstname + this.lastname;
 }
};
show(Mustache.render("{{#beatles}}{{name}}<br />{{/beatles}}", view));

ループ出力は利用可能ですが、後で処理する必要があります。 Mustache は配列内の値を関数に渡し、関数から返された値を出力するため、これは完全にニーズを満たします。ここで、最も外側の層が配列であることがわかります。関数が内部で使用されている限り、外側の配列はこの関数のパラメーターとして渡されます。

カスタム関数

var view = {
 "name": "Tater",
 "bold": function () {
 return function (text, render) {
   return render(text) + "<br />";
 }
 }
}
show(Mustache.render("{{#bold}}{{name}}{{/bold}}", view));

上記では変数をセクションとして使用しましたが、ここで関数をセクションとして使用すると、どのような効果が得られるでしょうか?

これは、セクションの中央にある元の文字列を最初のパラメーターとして、デフォルトのインタープリターを 2 番目のパラメーターとして受け取り、関数によって返された関数を呼び出します。その後、それを自分で処理できます。

反意語セクション

var view = {
 "repos": []
};
show(Mustache.render("{{#repos}}{{.}}{{/repos}}{{^repos}}no repos{{/repos}}", view));

上記のセクションも使用しますが、特定の部分を出力するかどうかを選択することしかできません。そこで、ここでそれを補います。

{{^ と }} を使用してセクションを定義する場合、この部分は、内部の値が空、null、空の配列、または空の文字列の場合にのみ表示されます。そうすれば、if else の効果を実現できます。

部分テンプレート

var view = {
 names: [
 { "name": "y" },
 { "name": "z" },
 { "name": "f" }
 ]
};
var base = "<h2>Names</h2>{{#names}}{{>user}}{{/names}}";
var name = "<b>{{name}}</b>";
show(Mustache.render(base, view, { user: name }));

Mustacheは時間を大幅に節約しますが、多くのテンプレートを定義しましたが、それらをネストして相互に使用することはできないため、また面倒になります。

そこで、他のテンプレートで使用するためのいくつかのテンプレートを定義する方法も紹介します。ここで他のテンプレートを使用する方法は、{{>templetename}} だけです。

最大の違いは、Mustache.render メソッドに 3 番目のパラメーターがあることです。

プリコンパイルされたテンプレート

Mustache.parse(template);
//其他代码
Mustache.render(template,view);

テンプレートには長所と短所があります。テンプレートのコンパイルには時間がかかるだけなので、特定のテンプレートを使用することがわかっている場合は、後で使用できるようにテンプレートを事前コンパイルできます。

以上が軽量JavaScriptテンプレートエンジンmustache.jsコードの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。