Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

徹底解説JsRender/JsViews 第4回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/12/24 14:00

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

目次

対象読者

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

必要な環境と準備

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

カスタムコンバーター

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト やましぎ (ヤマシギ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:徹底解説JsRender/JsViews
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5