Javascriptモデルエンジンmustache.js概要

背景
最近はELKのsentinlを使って警告配置を行い、sentinlのメール通知はmustacheをサポートしています.この機会にmustacheに関する知識を勉強しました.ここに記録します.
mustacheの思想
mustacheの核心はラベルとlogic-lessです.
タグ:テンプレートを定義する際に、{name}、{葑systems}{systems}タグを使っています.これはmustacheのラベルです.ラベルと混同しないように{}を{}代わりに{}使っています.
Logic-less:軽論理は、テンプレートを定義する時にはif-elseを使わないので、循環式コードがありません.すべてラベルで解決します.
ラベルの種類:

｛prop｝:データソースオブジェクト上のprop属性に対応する値を文字列出力に変換します.

{{prop}特殊文字変換を行わず、そのままコンテンツを出力します.

{{驽prod}{prop}

{^prop}{{プロ}

{.}は、列挙を表し、配列

全体を循環的に出力することができる.

｛partials｝で、サブモジュール

の表示を開始します.

{!comments}——注釈

{プロ}ラベル
mustacheが{prop}ラベルをレンダリングするロジック:
1)prop参照の値がnullまたはundefinedであれば、空の列にレンダリングされる.
2)プロが関数を参照している場合は、レンダリング時に自動的にこの関数を実行し、関数の戻り値をレンダリング結果として使用します.
3)他のシーンでは、直接にプロから引用された値を文字列に変換してレンダリング結果とします.
デフォルトでは、mustacheはpropをレンダリングする時、propの元の値をurl符号化したり、html符号化して出力しますので、「\」をhtmlエンティティ符に変換します.

console.log(Mustache.render(tpl1, {
     prop: function () {
         return 'it\'s a fun'
     }
}));//-it's a fun-

このような符号化行為を阻止するなら、ラベルを{prop}に変更すればいいです.
{撟prop}ラベル
これはラベルに対して非常に大きな役割を果たしています.if-elseとfor-each及び動的にレンダリングされたモダリティ機能を同時に完成できます.このラベルの間には他のテンプレートの内容を定義して、すべてのラベルを入れ込みます.
1)if-elseレンダリング
prop属性だけがデータソースオブジェクト上に存在し、falsy値(javascript 6 falsy値:null、undefined、NaN、0、false、空の文字列)ではなく、ラベル間の内容がレンダリングされます.そうでないとレンダリングされません.
prop属性は関数を参照すると、{app prop}自動的にこの関数を呼び出し、関数の戻り値をif-elseレンダリングロジックの判断根拠として、つまり関数がfalsy値または空配列に戻る場合、このラベルの内容はまだ表示されません.
2)for-eachレンダリング
プロップ属性が空でない配列を参照している場合、ラベル間の内容はデータサイズに従って反復され、配列要素がオブジェクトである場合には、反復時のラベルは配列要素上の属性を直接参照することができるように、このオブジェクトを各反復のコンテキストとしても使用することができる.
3)ダイナミックレンダリング
prop属性が参照しているのが関数であり、この関数の戻り値が関数である場合、mustacheはこの戻り関数を再度呼び出して、2つのパラメータを伝えます.textは元の目標内容を表し、renderはmustache内部の描画対象を表します.この関数の内容はrenderオブジェクトを通して元のモダリティ内容と結合することができます.レンダリングの論理をカスタマイズして、関数の戻り値をレンダリングの結果とします.
｛プロ｝タグ
これはラベルに対して、{app prop}{prop}のif-elseレンダリングと反対の論理を実行します.つまりプロ属性が存在しないか、参照しているのはfalsy値です.あるいは空の配列だけがラベルの内容を表示します.
詳細参照