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

徹底解説JsRender／JsViews 第4回

ヘルパーの登録

　複数のヘルパーを同時に登録できます。$.views.helpersメソッドを呼び出し、ヘルパーの名前をキーとする連想配列を渡します。

［リスト18］複数のヘルパーの定義（JsRender4_sample11.html）

$.views.helpers({
    ConvertToDateString: function(dateTime){ return dateTime.toLocaleDateString(); }
    message: "Hello JsRender helpers!",
});

　ヘルパーを登録する際に、ヘルパーを使用するテンプレートを指定することもできます。こうすると、指定したテンプレートだけが、そのヘルパーを使用します。複数のテンプレートを使用する際に、他のテンプレートへ影響を与えずにヘルパーを定義できるので、ヘルパーの管理が容易になります。ヘルパーを使用するテンプレートを指定するには、$.templatesメソッドを用いてテンプレートを登録し、$.views.helpersメソッドの第2引数にそのテンプレートを渡します。

［リスト19］同じヘルパーを呼び出す複数のテンプレート（JsRender4_sample12.html）

<!-- テンプレートの定義1 -->
<script id="itemTemplate" type="text/x-jsrender">
  メッセージ：{{>~message}}
</script>

<!-- テンプレートの定義2 -->
<script id="itemTemplate2" type="text/x-jsrender">
  メッセージ：{{>~message}}
</script>

［リスト20］テンプレートを指定したヘルパーの登録（JsRender4_sample12.html）

// ヘルパーの定義
var helpers = {message: "Hello JsRender helpers!"};

// テンプレートの登録
var myItemTemplate = $.templates("myItemTemplate", "#itemTemplate");

// ヘルパーをmyItemTemplateに登録
$.views.helpers(helpers, myItemTemplate);

　この例では、itemTemplateのみがヘルパーを使用します。itemTemplate2からはヘルパーの値を参照できません。

　renderメソッドのパラメーターとしてヘルパーを指定できます。こうすると、同じテンプレートで異なるヘルパーを使い分けることが可能です。

［リスト21］ヘルパー（JsRender4_sample13.html）

// ヘルパーの定義
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メソッドの引数にヘルパーを指定する

　helpers1とhelpers2という2種類のヘルパーを定義し、双方に同名のヘルパー定数messageを指定しました。同じテンプレートと同じデータモデルを使いつつも、ヘルパーを切り替えることで、異なる結果が得られます。

ヘルパー定数・変数

　関数だけでなく、定数や変数、オブジェクトをヘルパーとして登録できます。

　ヘルパー定数の活用例を紹介します。例えば、テンプレート内で繰り返し使われるエラーメッセージをヘルパーとして登録すると、テンプレートの冗長性が減る上に、メッセージの管理が容易になります。また、ヘルパーを差し替えることで、他の言語にも対応できます。

［リスト22］ヘルパー定数の活用（JsRender4_sample14.html）

<!-- テンプレートの定義 -->
<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：ヘルパー変数の活用

まとめ

　今回はJsRenderを拡張する方法を見てきました。JsRenderでは、コンバーターやカスタムタグ、ヘルパーを定義することで機能を追加できます。

　これまで、JsRenderの概要と基本的な使い方、{{if}}や{{for}}などの便利な機能、テンプレートの合成、そして、JsRenderを拡張する方法について紹介してきました。

　次回からは、JsRender上で動くMVVMフレームワークであるJsViewsを紹介していきます。

参考資料

• jsviws.com