外部テンプレート名をデータモデルで指定する
外部テンプレートをデータモデルのプロパティとして指定することも可能です。こうすると、データモデルに応じて使用するテンプレートの切り替えができます。
外部テンプレート名にデータモデルのプロパティを指定するには、{{include tmpl=パス/}}と記述します。tmplの値に、ダブルクォーテーションが付いていないことに注意してください。
［リスト3］データモデルを参照した外部テンプレートの参照（JsRender3_sample3.html）
<!-- テンプレートの定義 -->
<script id="itemTemplate" type="text/x-jsrender">
<b>名前:{{>name}}</b><br/>
<br/>
住所:<br/>
{{!-- 1. 外部テンプレートを参照 --}}
{{include tmpl=addressTemplate/}}
</script>
<!-- 2. 参照先のテンプレートの定義1 -->
<script id="jpnAddressTemplate" type="text/x-jsrender">
〒{{>zip}}<br/>
{{>province}}{{>county}}{{>city}}{{>street}}<br/>
</script>
<!-- 3. 参照先のテンプレートの定義2 -->
<script id="usAddressTemplate" type="text/x-jsrender">
{{>street}}<br/>
{{>city}}, {{>province}} {{>zip}}<br/>
</script>
［リスト4］外部テンプレート名を含んだデータモデル（JsRender3_sample3.html）
var items = [{
name: "富士箱根伊豆国立公園 箱根ビジターセンター",
zip: "250-0522",
province: "神奈川県",
county: "足柄下郡",
city: "箱根町",
street: "元箱根164",
// 4. データモデルのプロパティとして使用するテンプレートを指定
addressTemplate: "#jpnAddressTemplate"
},{
name: "ヨセミテ国立公園 バレービジターセンター",
zip: "95389",
province: "CA",
city: "Yosemite National Park",
street: "Yosemite Village Loop",
// 5. データモデルのプロパティとして使用するテンプレートを指定
addressTemplate: "#usAddressTemplate"
}];
- {{include}}を使って外部テンプレートを参照します。tmpl=の後にダブルクォーテーションを付けずにテンプレート名を指定していることに注意してください。
- 参照先のテンプレートを定義します。
- 別の参照先のテンプレートを定義します。
- データモデルのプロパティとして、使用する外部テンプレートの名前を指定します。
- 同様に、別のテンプレートを指定します。
図3：データモデルで指定した外部テンプレートの合成
コンテンツを参照する外部テンプレート
テンプレートを定義していると、何度も同じパターンが現れる場合があります。
［リスト5］同じパターンを含むテンプレート（JsRender3_sample4.html）
<script id="itemTemplate" type="text/x-jsrender">
<table>
<tr>
<td>名前</td>
{{!-- 1. 名前を表示するtd要素 --}}
<td>
<span class="image1"><img src="images/icon.png"/></span>
<span class="text1">{{>name}}</span>
</td>
</tr>
<tr>
<td>郵便番号</td>
{{!-- 2. 郵便番号を表示するtd要素 --}}
<td>
<span class="image1"><img src="images/icon.png"/></span>
<span class="text1">{{>zip}}</span>
</td>
</tr>
</table>
</script>
コンテンツを参照する外部テンプレートを使うと、このようなテンプレートを簡潔に定義できます。
上の例で、1. 名前を表示するtd要素と、2. 郵便番号を表示するtd要素の違いは{{>name}}と{{>zip}}だけで他は同じです。この同じ部分を外部テンプレートとして定義します。外部テンプレート中には、{{>name}}と{{>zip}}の代わりに、{{include tmpl=#content/}}と記述します。こうすることで、参照元で定義されたコンテンツ（{{>name}}と{{>zip}}）の参照が可能です。
#contentにダブルクォーテーションがついていないことに注意してください。ダブルクォーテーションを付けて"#content"と記述すると、contentというid属性を持つ要素を外部テンプレートとして使用することを意味します。
［リスト6］コンテンツを参照する外部テンプレート（JsRender3_sample5.html）
<script id="dataCellTemplate" type="text/x-jsrender">
<td>
<span class="image1"><img src="images/icon.png"/></span>
<span class="text1">
{{!-- コンテンツを参照 --}}
{{include tmpl=#content/}}
</span>
</td>
</script>
次に、定義した外部テンプレートを参照します。{{include tmpl="テンプレート名"}}と{{/include}}の2つに分けて記述し、その間に、外部テンプレートから参照するコンテンツを記述します。
［リスト7］コンテンツを参照する外部テンプレートの参照（JsRender3_sample5.html）
<script id="itemTemplate" type="text/x-jsrender">
<table>
<tr>
<td>名前</td>
{{!-- 1. 外部テンプレートを参照し、名前を表示 --}}
{{include tmpl="#dataCellTemplate"}}
{{>name}}
{{/include}}
</tr>
<tr>
<td>郵便番号</td>
{{!-- 2. 外部テンプレートを参照し、郵便番号を表示 --}}
{{include tmpl="#dataCellTemplate"}}
{{>name}}
{{/include}}
</tr>
</table>
</script>
図4：コンテンツを参照する外部テンプレートの合成
