ヘルパーの登録
複数のヘルパーを同時に登録できます。$.views.helpersメソッドを呼び出し、ヘルパーの名前をキーとする連想配列を渡します。
$.views.helpers({ ConvertToDateString: function(dateTime){ return dateTime.toLocaleDateString(); } message: "Hello JsRender helpers!", });
ヘルパーを登録する際に、ヘルパーを使用するテンプレートを指定することもできます。こうすると、指定したテンプレートだけが、そのヘルパーを使用します。複数のテンプレートを使用する際に、他のテンプレートへ影響を与えずにヘルパーを定義できるので、ヘルパーの管理が容易になります。ヘルパーを使用するテンプレートを指定するには、$.templatesメソッドを用いてテンプレートを登録し、$.views.helpersメソッドの第2引数にそのテンプレートを渡します。
<!-- テンプレートの定義1 --> <script id="itemTemplate" type="text/x-jsrender"> メッセージ:{{>~message}} </script> <!-- テンプレートの定義2 --> <script id="itemTemplate2" type="text/x-jsrender"> メッセージ:{{>~message}} </script>
// ヘルパーの定義 var helpers = {message: "Hello JsRender helpers!"}; // テンプレートの登録 var myItemTemplate = $.templates("myItemTemplate", "#itemTemplate"); // ヘルパーをmyItemTemplateに登録 $.views.helpers(helpers, myItemTemplate);
この例では、itemTemplateのみがヘルパーを使用します。itemTemplate2からはヘルパーの値を参照できません。
renderメソッドのパラメーターとしてヘルパーを指定できます。こうすると、同じテンプレートで異なるヘルパーを使い分けることが可能です。
// ヘルパーの定義 var helpers1 = {message: "Introduction of JsRender helpers"}; var helpers2 = {message: "JsRender ヘルパーの紹介"}; // テンプレートを使ったテキストの生成 var result1 = $("#itemTemplate").render(item, helpers1); var result2 = $("#itemTemplate").render(item, helpers2);
![図8:renderメソッドの引数にヘルパーを指定する](http://cz-cdn.shoeisha.jp/static/images/article/7531/7531_08_s.gif)
helpers1とhelpers2という2種類のヘルパーを定義し、双方に同名のヘルパー定数messageを指定しました。同じテンプレートと同じデータモデルを使いつつも、ヘルパーを切り替えることで、異なる結果が得られます。
ヘルパー定数・変数
関数だけでなく、定数や変数、オブジェクトをヘルパーとして登録できます。
ヘルパー定数の活用例を紹介します。例えば、テンプレート内で繰り返し使われるエラーメッセージをヘルパーとして登録すると、テンプレートの冗長性が減る上に、メッセージの管理が容易になります。また、ヘルパーを差し替えることで、他の言語にも対応できます。
<!-- テンプレートの定義 --> <script id="itemTemplate" type="text/x-jsrender"> 名前: {{if name}} {{>name}} {{else}} {{>~errorEmptyName}} {{/if}} <br/> 住所: {{if address}} {{>address}} {{else}} {{>~errorEmptyAddress}} {{/if}} <br/> </script> <script type="text/javascript"> // データモデルの定義 var item = { name: null, address: null }; // ヘルパーの定義 var errorMessages = { errorEmptyName: "名前を入力してください", errorEmptyAddress: "住所を入力してください" }; // テンプレートを使ったテキストの生成 var result = $("#itemTemplate").render(item, errorMessages); // div要素の中身を入れ替える $("#placeholder").html(result); </script>
![図9:ヘルパー変数の活用](http://cz-cdn.shoeisha.jp/static/images/article/7531/7531_09_s.gif)
まとめ
今回はJsRenderを拡張する方法を見てきました。JsRenderでは、コンバーターやカスタムタグ、ヘルパーを定義することで機能を追加できます。
これまで、JsRenderの概要と基本的な使い方、{{if}}や{{for}}などの便利な機能、テンプレートの合成、そして、JsRenderを拡張する方法について紹介してきました。
次回からは、JsRender上で動くMVVMフレームワークであるJsViewsを紹介していきます。