Javascript テンプレート エンジンの使用方法を調べるMustache.js_javascript スキル

軽量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 さんは非常にイライラすると思います。ここでは、オブジェクトで構成される配列を出力する場合、{{name}} の代わりに {{.}} を使用する必要があります。

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

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 id="Names">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);

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

この記事が皆さんの学習に役立つことを願っています。