mustache.jsの使い方

2015.10.01

mustache.jsの使い方

mustache.js（マスタッシュ）はJavaScriptのテンプレートエンジンです。Node-REDのtemplateノードでもMustache記法が使用できるようです。

コアノード : Node-RED日本ユーザ会
nodered.jp

ブラウザでの使用方法

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

<script type="text/javascript" src="http://www.example.com/js/mustache.min.js"></script>

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

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

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

var template = "Hello {{data}}";

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

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

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

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

{data:置換したい文字列}

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

var template = "Hello {{data}}";
var html = Mustache.render( template, {data:"World."});

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

var template = "My name is {{name}}.My age is {{age}}.";
var view = {name:"Bob",age:function(){return 12*2;}};
var html = Mustache.render(template,view);

DEMO

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

var template = "My name is {{name}}.My age is {{age}}.";
var view = {name:"Bob",age:"<b>23</b>"};
var html = Mustache.render(template,view);

DEMO

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

var template = "My name is {{name}}.My age is {{{age}}}.";
var view = {name:"Bob",age:"<b>23</b>"};
var html = Mustache.render(template,view);

DEMO

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

var template = "My name is {{name}}.My age is {{&age}}.";
var view = {name:"Bob",age:"<b>23</b>"};
var html = Mustache.render(template,view);

DEMO

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

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

var template = "My name is {{name}}.My age is {{=<% %>}}{{&age}}<%={{ }}=%>.";
var view = {name:"Bob",age:"23"};
var html = Mustache.render(template,view);

DEMO

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

var template = "{{!comment}}My name is {{name}}.My age is {{age}}.";
var view = {name:"Bob",age:"23"};
var html = Mustache.render(template,view);

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

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

<script type="text/javascript">
$(function(){
 var template=$("#template").html();
 var arr=[{id:1,content:"AA"},{id:2,content:"BB"},{id:3,content:"CC"}];

 for(var i=0;i<arr.length;i++){
 var html = Mustache.render(template,arr[i]);
 $("h3").append(html);
 }
});
</script>

<body>
<h3></h3>
<script id="template" type="x-tmpl-mustache">
 <div id="{{id}}">{{content}}</div>
</script>
</body>

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

コメント

タイトルとURLをコピーしました