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

徹底解説JsRender／JsViews 第4回

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

対象読者

• JavaScriptテンプレートエンジンに興味のある方
• JavaScript、jQueryの基本を理解している方

必要な環境と準備

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

• JsRender
• jQuery

カスタムコンバーター

　コンバーターを使用すると、テンプレートで指定した値を変換してから出力できます。例えば、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：複数の引数とパラメーター取るカスタムコンバーター