SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

徹底解説JsRender/JsViews

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

徹底解説JsRender/JsViews 第4回

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

  • 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:複数の引数とパラメーター取るカスタムコンバーター

次のページ
カスタムタグ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
徹底解説JsRender/JsViews連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7531 2013/12/24 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング