ヘルパー
JsRenderの中からJavaScriptの関数や変数に直接アクセスすることはできません。タグの中から関数や変数にアクセスするには、それらをヘルパーとして登録します。
ヘルパーを使用するには、renderメソッドを呼び出す前に登録します。$.views.helpersメソッドを呼び出し、引数にヘルパーの名前と値を渡します。
定義したヘルパーを使用するには、{{:~ヘルパー名()/}}、もしくは、{{:~ヘルパー名}}のようにヘルパー名の前にチルダを指定します。
［リスト14］ヘルパー（JsRender4_sample9.html）
<!-- テンプレートの定義 -->
<script id="itemTemplate" type="text/x-jsrender">
最終更新日：{{>~ConvertToDateString(lastModified)}}
</script>
［リスト15］ヘルパーの定義（JsRender4_sample9.html）
$.views.helpers("ConvertToDateString", function(dateTime){ return dateTime.toLocaleDateString(); });
図6：ヘルパー
ヘルパー関数ConvertToDateStringを定義し、テンプレートから呼び出しました。ヘルパー関数を呼び出すには、{{>~ConvertToDateString(lastModified)}}のように、ヘルパー関数の前にチルダを指定し、通常のJavaScriptの関数呼び出しと同様に丸カッコを付けて引数を指定します。
ヘルパー関数とコンバーターは似ていますが、コンバーターと異なり引数をとらないヘルパー関数を定義したり、ifやforタグの引数にヘルパーを使用したりすることができます。
次の例では、ヘルパー関数をforタグの引数に使用しています。
［リスト16］forタグの引数にヘルパー関数を使用するテンプレート（JsRender4_sample10.html）
<!-- テンプレートの定義 -->
<script id="itemTemplate" type="text/x-jsrender">
{{>name}}：<br/>
{{for ~reverse(prefectures) }}
{{>name}}の面積は{{>area}}km<sup>2</sup>です。<br/>
{{/for}}
</script>
［リスト17］データモデルとヘルパー関数の定義（JsRender4_sample10.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 },
]
};
// ヘルパーの定義
$.views.helpers("reverse", function(array) { return array.slice().reverse(); });
図7：ヘルパー関数の活用
配列の要素を反転させるヘルパー関数reverseを定義し、{{for}}の引数として使用しました。これにより、データモデル内の配列要素を逆順に表示しています。
ヘルパー関数を使うと、ソートやフィルターのような機能も簡単に実装できます。
