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

徹底解説JsRender／JsViews 第3回

if/elseを使ったテンプレートの合成

　{{include}}と同様に、{{if}}や{{else}}から外部テンプレートを呼び出せます。{{if 条件式 tmpl="テンプレート名"/}}と記述し、条件式が真の場合、テンプレート名に指定したテンプレートを参照します。

　{{if 条件式 tmpl="テンプレート名"/}}は{{if 条件式}}{{include tmpl="テンプレート名"/}}{{/if}}と同義です。

　{{else}}の場合も同様に、{{else tmpl="テンプレート名"}}もしくは、{{else 条件式 tmpl="テンプレート名"}}と記述します。

　{{if 条件式 tmpl="テンプレート名"/}}の例を示します。

［リスト8］ifから外部テンプレートを参照（JsRender3_sample6.html）

<script id="itemTemplate" type="text/x-jsrender">
  <b>名前:{{>name}}</b><br/>
  <br/>
  住所:<br/>

  {{!-- showAddressプロパティが真の場合、addressTemplateを参照 --}}
  {{if showAddress tmpl=addressTemplate/}}<br/>
</script>

　次に、ifとelseを使った例を示します。

［リスト9］if/elseから外部テンプレートを参照（JsRender3_sample7.html）

<script id="itemTemplate" type="text/x-jsrender">
  <b>名前:{{>name}}</b><br/>
  <br/>
  住所:<br/>

  {{!-- showAddressプロパティが真の場合、addressTemplateを参照 --}}
  {{if showAddress tmpl=addressTemplate}}

  {{!-- それ以外の場合、"#noAddressTemplate"を参照 --}}
  {{else tmpl="#noAddressTemplate"}}

  {{/if}}
  <br/>
</script>

　この例で、{{if}}と{{else}}の右二重ブレース}}の直前に/は必要ありません。{{if}}には対応する終了タグ{{/if}}がありますし、{{else}}には終了タグが不要です。

図5：if/elseを使ったテンプレートの合成

forを使ったテンプレートの合成

　{{for}}の中に外部テンプレートを指定できます。{{for 配列へのパス tmpl="テンプレート名"/}}と記述します。

　{{for}}を使ってテンプレートを合成する場合、テンプレート名に同じテンプレートを指定できます。こうすることで、再帰的な構造を持つデータモデルからテキストやHTMLの生成が可能です。

［リスト10］forから外部テンプレートを参照（JsRender3_sample8.html）

<script id="itemTemplate" type="text/x-jsrender">
  <li>
    {{>name}}
    {{if childNodes}}
      <ol>
        {{for childNodes tmpl="#itemTemplate"/}}
      </ol>
    {{/if}}
  </li>

［リスト11］再帰的な構造を持つデータモデル（JsRender3_sample8.html）

var items = [{
    name: "item1",
    childNodes: [
      { name: "item1-1" },
      { name: "item1-2" },
      { name: "item1-3",
        childNodes: [
          { name: "item1-3-1" },
          { name: "item1-3-2",
            childNodes: [
              { name: "item1-3-2-1" }
            ]},
          { name: "item1-3-3" }
      ]},
    ]
  },{
    name: "item2",
    childNodes: [
      { name: "item2-1",
        childNodes: [
          { name: "item2-1-1" },
          { name: "item2-1-2" }
        ]},
      { name: "item2-2" },
    ]
  }];

図6：forを使ったテンプレートの合成

　{{if}}や{{for}}は{{include}}と同様に、外部テンプレート名をデータモデルで指定することや、コンテンツを参照する外部テンプレートを参照できます。

　必要に応じて、これらの機能を組み合わせたテンプレートを定義するとよいでしょう。

まとめ

　今回はテンプレートを合成する方法を見てきました。{{include}}や{{if}}などにtmpl="テンプレート名"を指定することで、外部テンプレートを参照できます。

　外部テンプレートを使うと、テンプレートを簡潔に定義できます。また、再帰的なデータモデルを扱ううえでテンプレートの合成は欠かせません。

　次回は引き続き、JsRenderの高度な機能を紹介します。

参考資料

• jsviws.com