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

CodeZine / 2013年12月24日 14時0分

図9:ヘルパー変数の活用

 前回は、JsRenderで複数のテンプレートを合成する方法を紹介しました。今回は、JsRenderを拡張する方法を紹介します。コンバーターやタグを定義し、新たな機能を追加することや、テンプレートの中から関数を呼び出すこともできます。

■対象読者

JavaScriptテンプレートエンジンに興味のある方 JavaScript、jQueryの基本を理解している方 ■必要な環境と準備

 JsRenderとjQueryを以下のサイトからダウンロードしてください。詳しくは、第1回を参照してください。

JsRenderjQuery■カスタムコンバーター

 コンバーターを使用すると、テンプレートで指定した値を変換してから出力できます。例えば、HTMLコンバーターを使用すると、値はHTMLエンコードしてから出力されます。第2回で紹介したように、JsRenderには標準でHTMLコンバーター、属性コンバーター、URLコンバーターが備わっています。同様に、カスタムコンバーターと呼ばれる独自のコンバーターを定義できます。

 コンバーターとは引数を受け取り、それを変換した値を返す関数です。コンバーターを使用するには、renderメソッドを呼び出す前にコンバーターを登録します。$.views.convertersメソッドを呼び出し、引数にコンバーター名とコンバーターの関数を渡します。

 定義したコンバーターを使用するには、{{コンバーター名:値}}のように、コロンの前にコンバーター名を指定します。

[リスト1]カスタムコンバーター(JsRender4_sample1.html)
<!-- テンプレートの定義 --> <script id="itemTemplate" type="text/x-jsrender"> 更新日:{{date:lastModified}}<br/> </script> <script type="text/javascript"> // データモデルの定義 var item = { lastModified: new Date("2013/10/10 18:00:00") }; // コンバーターの定義 $.views.converters("date", function(value){ return value.toLocaleDateString(); }); // テンプレートを使ったテキストの生成 var result = $("#itemTemplate").render(item); // div要素の中身を入れ替える $("#placeholder").html(result); </script>
図1:カスタムコンバーター


 複数のコンバーターを同時に登録できます。$.views.convertersメソッドを呼び出し、コンバーター名をキー、関数を値とする連想配列を渡します。

[リスト2]複数のカスタムコンバーターの定義(JsRender4_sample2.html)
$.views.converters({ date: function(value){ return value.toLocaleDateString(); }, time: function(value){ return value.toLocaleTimeString(); } });
●複数の引数を持つコンバーター

 コンバーターには複数の引数を持たせることができます。{{コンバーター名:引数1 引数2}}のように、JsRenderのタグの中にスペース区切りで複数の引数を指定します。

[リスト3]複数の引数を持つカスタムコンバーター(JsRender4_sample3.html)
<script id="itemTemplate" type="text/x-jsrender"> 名前:{{name:firstName lastName}} </script>
[リスト4]複数の引数を持つカスタムコンバーターの定義(JsRender4_sample3.html)
$.views.converters("name", function(firstName, lastName){ return firstName + " " + lastName; });
図2:複数の引数を取るカスタムコンバーター


●パラメーターによって動作を変えるコンバーター

 タグの中にパラメーターを指定できます。{{コンバーター名:引数 パラメーター名=パラメーター値}}のようにパラメーターを指定し、コンバーター関数からは、thisオブジェクトを用いてパラメーターの値を取得します。コンバーター関数の中で、thisオブジェクトはタグのインスタンスを指しており、this.tagCtx.props連想配列にプロパティの値が格納されています。

[リスト5]パラメーターを持つカスタムコンバーター(JsRender4_sample4.html)
<script id="itemTemplate" type="text/x-jsrender"> 名前:{{name:firstName lastName order="LastFirst"}} </script>
[リスト6]パラメーターを持つカスタムコンバーターの定義(JsRender4_sample4.html)
$.views.converters("name", function(firstName, lastName){ if(this.tagCtx.props.order == "LastFirst") return lastName + ", " + firstName; else return firstName + " " + lastName; });
図3:複数の引数とパラメーター取るカスタムコンバーター




CodeZine

トピックスRSS

ランキング