対象読者
- JavaScriptテンプレートエンジンに興味のある方
- JavaScript、jQueryの基本を理解している方
必要な環境と準備
JsRenderとjQueryを以下のサイトからダウンロードしてください。詳しくは、第1回を参照してください。
テンプレートのコメント
今回から、サンプル中のテンプレートにコメントが現れます。
テンプレートの中で、コメントは{{!-- コメント --}}と記述します。JsRenderはコメントを無視しますので、送信されたテキストにもコメントは含まれません。
テンプレートコメントの代わりに、HTMLのコメント(<!--~-->)の使用も可能ですが、こちらはブラウザにもそのまま送信されるので注意してください。
<script id="itemTemplate" type="text/x-jsrender"> この下にテンプレートのコメントがあります。<br/> {{!-- これはテンプレートのコメントです。 --}}<br/> <br/> この下にHTMLのコメントがあります。<br/> <!-- HTMLのコメントです。 --> </script>
![図1:コメントを含んだのテンプレートの表示結果](http://cz-cdn.shoeisha.jp/static/images/article/7450/7450_01_s.gif)
テンプレートの合成
テンプレートを定義していると、同じパターンが何度も現れる場合があります。繰り返し現れる部分を外部テンプレートとして別に定義することで、テンプレートの定義が簡潔になります。テンプレートの中から別のテンプレートを参照する機能を、テンプレートの合成といいます。
includeを使ったテンプレートの合成
テンプレートを合成するには、テンプレートの中に{{include tmpl="テンプレート名"/}}と記述します。テンプレート名の箇所には、名前付きテンプレートの名前か、テンプレートを定義したscript要素のidの値を指定します。
名前付きテンプレートの定義方法は、第1回を参照してください。
<!-- テンプレートの定義 --> <script id="itemTemplate" type="text/x-jsrender"> <b>名前:{{>name}}</b><br/> <br/> 住所:<br/> {{!-- 1. 外部テンプレートを参照 --}} {{include tmpl="#addressTemplate"/}} </script> <!-- 2. 参照先のテンプレートの定義 --> <script id="addressTemplate" type="text/x-jsrender"> 〒{{>zip}}<br/> {{>province}}{{>county}}{{>city}}{{>street}}<br/> </script> <!-- テキストを表示するdiv要素 --> <div id="placeholder"></div> <script type="text/javascript"> // データモデルの定義 var item = { name: "富士箱根伊豆国立公園 箱根ビジターセンター", zip: "250-0522", province: "神奈川県", county: "足柄下郡", city: "箱根町", street: "元箱根164" }; // 3. テンプレートを使ったテキストの生成 var result = $("#itemTemplate").render(item); // div要素の中身を入れ替える $("#placeholder").html(result); </script>
- テンプレート内に{{include}}タグを記述し、外部テンプレート名として"#addressTemplate"を指定しています。
- 参照先のテンプレートを定義します。script要素のid属性にaddressTemplateが指定されています。
- JsRenderのrenderメソッドを呼び出し、HTMLを出力します。この例では2つのテンプレートを使っていますが、renderメソッドの呼び出しは1度だけです。
![図2:合成したテンプレートの出力結果](http://cz-cdn.shoeisha.jp/static/images/article/7450/7450_02_s.gif)
{{include tmpl="テンプレート名"/}}の右二重ブレースの直前に/があります。これはXMLやHTMLの空要素(<br/>など)と同様のもので、{{include tmpl="テンプレート名"}}{{/include}}のような形での記述もできます。