条件分岐
テンプレートの中に条件分岐を書くことも可能です。条件分岐を使うと、パスに指定したオブジェクトが存在するか否かで出力するテキストを変更することや、特定の条件を満たしたときにのみテキストを出力することができます。
ifを使った条件分岐
ifを使った条件分岐は次のように書きます。
リスト11 ifを使った条件分岐（JsRender2_sample8.html）
<script id="itemTemplate" type="text/x-jsrender">
{{if price}}
<b>{{>name}}</b>の値段は<b>{{>price}}円</b>です。<br/>
{{/if}}
{{if weight < 50 }}
重さは50グラム未満です。<br/>
{{/if}}
</script>
図6：ifを使った条件分岐
条件分岐は{{if 条件式}}と記述し、条件式にはパスか式を指定します。パスに指定されたオブジェクトが存在するか、式が真の値を返す場合、{{if 条件式}}と{{/if}}で囲まれた範囲を出力します。
ifとelseを使った条件分岐
{{else}}を使って、複数の条件分岐を指定することもできます。
リスト12 ifとelseを使った条件分岐（JsRender2_sample9.html）
<script id="itemTemplate" type="text/x-jsrender">
{{if price}}
<b>{{>name}}</b>の値段は<b>{{>price}}円</b>です。<br/>
{{else}}
<b>{{>name}}</b>の値段は未定です。<br/>
{{/if}}
{{if weight < 50 }}
重さは50グラム未満です。<br/>
{{else}}
重さは50グラム以上です。<br/>
{{/if}}
</script>
条件式に指定したパスが存在しないか、式が偽の値を返す場合、{{else}}と{{/if}}で囲まれた範囲を出力します。
3つ以上の条件分岐
3つ以上の条件分岐を書くには、elseの後に条件式を書いてください。
リスト13 3つ以上の条件分岐（JsRender2_sample10.html）
<script id="itemTemplate" type="text/x-jsrender">
{{if weight < 50 }}
重さは50グラム未満です。<br/>
{{else weight < 100 }}
重さは100グラム未満です。<br/>
{{else}}
重さは100グラム以上です。<br/>
{{/if}}
</script>
列挙
データモデルに配列や連想配列が含まれている場合は、その要素を列挙することができます。
forを使った列挙
{{for 配列へのパス}}と記述すると、{{for}}と{{/for}}で囲まれた範囲を配列要素の数分、繰り返し出力します。
リスト14 配列を含んだデータモデル（JsRender2_sample11.html）
// データモデルの定義
var item = {
name: "関東地方の面積",
prefectures: [
{ name: "茨城県", area: 6095.69 },
{ name: "栃木県", area: 6408.28 },
{ name: "群馬県", area: 6363.16 },
{ name: "埼玉県", area: 6363.16 },
{ name: "千葉県", area: 6095.69 },
{ name: "東京都", area: 2187.42 },
{ name: "神奈川県", area: 2415.84 }
]
};
リスト15 配列要素を列挙するテンプレート（JsRender2_sample12.html）
<script id="itemTemplate" type="text/x-jsrender">
{{>name}}：<br/>
{{for prefectures }}
{{>name}}の面積は{{>area}}km<sup>2</sup>です。<br/>
{{/for}}
</script>
図7：forを使った列挙
配列が空の場合
{{for}}と{{/for}}の間に{{else}}を記述することで、配列が空の場合に出力するものを指定できます。
リスト16 配列要素を列挙するテンプレート（JsRender2_sample13.html）
<script id="itemTemplate" type="text/x-jsrender">
{{>name}}：<br/>
{{for prefectures }}
{{>name}}の面積は{{>area}}km<sup>2</sup>です。<br/>
{{else}}
データがありません<br/>
{{/for}}
</script>
図8：配列が空の場合
まとめ
今回はJsRenderの機能の中から特に重要なものを選んで紹介しました。
テンプレートの中でコンバーターを指定する方法を見てきました。コンバーターを使うとHTMLを安全に出力できます。
また、テンプレートの中でパスや式を指定する方法や、条件分岐や列挙を指定する方法を見てきました。これらの構文を使うと、複雑なデータモデルからHTMLを出力できます。
次回はJsRenderの高度な機能を紹介します。
