対象読者
- JavaScriptテンプレートエンジンに興味のある方
- JavaScript、jQueryの基本を理解している方
必要な環境と準備
JsRenderとjQueryを以下のサイトからダウンロードしてください。詳しくは、第1回を参照してください。
テンプレートのコメント
今回から、サンプル中のテンプレートにコメントが現れます。
テンプレートの中で、コメントは{{!-- コメント --}}と記述します。JsRenderはコメントを無視しますので、送信されたテキストにもコメントは含まれません。
テンプレートコメントの代わりに、HTMLのコメント（<!--～-->）の使用も可能ですが、こちらはブラウザにもそのまま送信されるので注意してください。
［リスト1］コメントを含んだテンプレート（JsRender3_sample1.html）
<script id="itemTemplate" type="text/x-jsrender">
この下にテンプレートのコメントがあります。<br/>
{{!-- これはテンプレートのコメントです。 --}}<br/>
<br/>
この下にHTMLのコメントがあります。<br/>
<!-- HTMLのコメントです。 -->
</script>
図1：コメントを含んだのテンプレートの表示結果
テンプレートの合成
テンプレートを定義していると、同じパターンが何度も現れる場合があります。繰り返し現れる部分を外部テンプレートとして別に定義することで、テンプレートの定義が簡潔になります。テンプレートの中から別のテンプレートを参照する機能を、テンプレートの合成といいます。
includeを使ったテンプレートの合成
テンプレートを合成するには、テンプレートの中に{{include tmpl="テンプレート名"/}}と記述します。テンプレート名の箇所には、名前付きテンプレートの名前か、テンプレートを定義したscript要素のidの値を指定します。
名前付きテンプレートの定義方法は、第1回を参照してください。
［リスト2］テンプレートの合成（JsRender3_sample2.html）
<!-- テンプレートの定義 -->
<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：合成したテンプレートの出力結果
{{include tmpl="テンプレート名"/}}の右二重ブレースの直前に/があります。これはXMLやHTMLの空要素（<br/>など）と同様のもので、{{include tmpl="テンプレート名"}}{{/include}}のような形での記述もできます。
