JavaScriptテンプレートエンジンJsRenderの拡張機能

徹底解説JsRender／JsViews 第4回

ヘルパー

　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}}の引数として使用しました。これにより、データモデル内の配列要素を逆順に表示しています。

　ヘルパー関数を使うと、ソートやフィルターのような機能も簡単に実装できます。