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

徹底解説JsRender／JsViews 第4回

カスタムタグ

　JsRenderには{{if}}や{{for}}、{{include}}などのタグが標準で備わっていますが、必要に応じて、カスタムタグと呼ばれる独自のタグを定義できます。

　カスタムタグもコンバーターと同様に関数です。カスタムタグを使用するには、renderメソッドを呼び出す前にカスタムタグを登録します。$.views.tagsメソッドを呼び出し、引数にカスタムタグの名前と関数を渡します。

　定義したカスタムタグを使用するには、{{カスタムタグ 引数/}}、もしくは、{{カスタムタグ 引数}}...{{/カスタムタグ}}のように指定します。

［リスト7］カスタムタグ（JsRender4_sample5.html）

<!-- テンプレートの定義 -->
<script id="itemTemplate" type="text/x-jsrender">
  ユーザーエージェント：{{userAgent/}}
</script>

［リスト8］カスタムタグの定義（JsRender4_sample5.html）

$.views.tags("userAgent", function(){
    return navigator.userAgent;
});

図4：カスタムタグ

　複数のカスタムタグを同時に登録できます。$.views.tagsメソッドを呼び出し、カスタムタグの名前をキー、関数を値とする連想配列を渡します。

［リスト9］複数のカスタムタグの定義（JsRender4_sample6.html）

$.views.tags({
    userAgent: function(){ return navigator.userAgent; },
    appName: function(){ return navigator.appName; }
});

　カスタムタグはカスタムコンバーターと似ていますが、カスタムコンバーターと異なり、開始タグと終了タグを持つことができます。開始タグと終了タグの間に書かれたテンプレートは、this.tagCtx.props.templateプロパティとして取得できます。また、this.tagCtx.renderメソッドを呼び出してテキストを生成できます。

［リスト10］開始タグと終了タグを持つカスタムタグ（JsRender4_sample7.html）

<script id="itemTemplate" type="text/x-jsrender">
  {{myIf true}}
    この文は表示されます。
  {{/myIf}}

  {{myIf false}}
    この文は表示されません。
  {{/myIf}}
</script>

［リスト11］開始タグと終了タグを持つカスタムタグの定義（JsRender4_sample7.html）

$.views.tags("myIf", function(condition){
    if(condition)
        return this.tagCtx.render();
    else
        return "";
});

図5：開始タグと終了タグを使用するカスタムタグ

　例として、引数の値が真の場合のみ値を出力するカスタムタグを定義しました。カスタムタグmyIfは引数を1つ取ります。{{myIf true}}や{{myIf false}}のtrueやfalseが引数で、conditionとしてmyIf関数に渡されます。そして、その値が真の場合renderメソッドを呼び出します。

　複数の引数を取るカスタムタグを定義することもできます。複数の引数を指定するには、{{カスタムタグ 引数1 引数2}}のように、タグの中にスペース区切りで複数の引数を指定します。

　また、タグの中にパラメーターを指定できます。{{カスタムタグ パラメーター名=パラメーター値}}のようにパラメーターを指定します。カスタムタグ関数では、this.tagCtx.props連想配列経由でパラメーターの値を取得します。

［リスト12］複数の引数とパラメーターを持つカスタムタグ（JsRender4_sample8.html）

<script id="itemTemplate" type="text/x-jsrender">
  名前：{{name firstName lastName order="LastFirst"/}}
</script>

［リスト13］複数の引数とパラメーターを持つカスタムタグの定義（JsRender4_sample8.html）

$.views.tags("name", function(firstName, lastName){
    if(this.tagCtx.props.order == "LastFirst")
        return lastName + ", " + firstName;
    else
        return firstName + " " + lastName;
});