JavaScriptテンプレートエンジンJsRenderのテンプレートの合成

徹底解説JsRender／JsViews 第3回

　前回はJsRenderの基本的な機能であるifを使った条件分岐と、forを使った列挙を紹介しました。今回は複数のテンプレートを合成する方法を紹介します。

対象読者

• JavaScriptテンプレートエンジンに興味のある方
• JavaScript、jQueryの基本を理解している方

必要な環境と準備

　JsRenderとjQueryを以下のサイトからダウンロードしてください。詳しくは、第1回を参照してください。

• JsRender
• jQuery

テンプレートのコメント

　今回から、サンプル中のテンプレートにコメントが現れます。

　テンプレートの中で、コメントは{{!-- コメント --}}と記述します。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>

1. テンプレート内に{{include}}タグを記述し、外部テンプレート名として"#addressTemplate"を指定しています。
2. 参照先のテンプレートを定義します。script要素のid属性にaddressTemplateが指定されています。
3. JsRenderのrenderメソッドを呼び出し、HTMLを出力します。この例では2つのテンプレートを使っていますが、renderメソッドの呼び出しは1度だけです。

図2：合成したテンプレートの出力結果

　{{include tmpl="テンプレート名"/}}の右二重ブレースの直前に/があります。これはXMLやHTMLの空要素（<br/>など）と同様のもので、{{include tmpl="テンプレート名"}}{{/include}}のような形での記述もできます。