mustache.jsの使い方

mustache.js(マスタッシュ)はJavaScriptのテンプレートエンジンです。

プリロードして使います。

簡単な使い方を紹介します。

{{と}}で囲んだ部分がタグとして認識されます。

例えばテンプレートは以下のようにあらわされます。

{{data}}が何かに置き換わるのが予想されると思います。

このテンプレートに置換文字を渡して表示するにはMustache.render()メソッドを使用します。

第一引数にテンプレートを格納した変数、第二引数にオブジェクトをセットします。

オブジェクトは以下の形式にします。

具体的には以下のようにします。

DEMO
オブジェクトには関数を渡したりすることができます。

DEMO

オブジェクトの値にhtmlタグが含まれている場合です。<は&lt;、>は&gt;といったようにエスケープされます。

DEMO

これをエスケープせずに表示したい場合は{{{と}}}で囲みます。

DEMO

{{&と}}で囲んでもエスケープされません。

DEMO

{{=<% %>=}}と<%={{ }}=%>で囲んだ部分は置換されずにそのまま表示されます。

そのため、この間に{{age}}としてもそのまま{{age}}が表示されます。

DEMO

{{!と}}で囲んだ部分はコメントです。

DEMO
テンプレートエンジンなので通常はjQueryと併用してhtmlやjspに記述します。

以下のようなhtmlがあったとします。

h3タグ内に、テンプレートをviewの数だけループして表示しています。
DEMO

関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくば、我に七難八苦を与えたまえ」です^^

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA