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