Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

徹底解説JsRender/JsViews 第3回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/11/19 14:00

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

目次

対象読者

  • 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:コメントを含んだのテンプレートの表示結果
図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:合成したテンプレートの出力結果
図2:合成したテンプレートの出力結果

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト やましぎ (ヤマシギ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:徹底解説JsRender/JsViews
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5