カスタムタグ
JsRenderには{{if}}や{{for}}、{{include}}などのタグが標準で備わっていますが、必要に応じて、カスタムタグと呼ばれる独自のタグを定義できます。
カスタムタグもコンバーターと同様に関数です。カスタムタグを使用するには、renderメソッドを呼び出す前にカスタムタグを登録します。$.views.tagsメソッドを呼び出し、引数にカスタムタグの名前と関数を渡します。
定義したカスタムタグを使用するには、{{カスタムタグ 引数/}}、もしくは、{{カスタムタグ 引数}}...{{/カスタムタグ}}のように指定します。
<!-- テンプレートの定義 --> <script id="itemTemplate" type="text/x-jsrender"> ユーザーエージェント:{{userAgent/}} </script>
$.views.tags("userAgent", function(){ return navigator.userAgent; });
複数のカスタムタグを同時に登録できます。$.views.tagsメソッドを呼び出し、カスタムタグの名前をキー、関数を値とする連想配列を渡します。
$.views.tags({ userAgent: function(){ return navigator.userAgent; }, appName: function(){ return navigator.appName; } });
カスタムタグはカスタムコンバーターと似ていますが、カスタムコンバーターと異なり、開始タグと終了タグを持つことができます。開始タグと終了タグの間に書かれたテンプレートは、this.tagCtx.props.templateプロパティとして取得できます。また、this.tagCtx.renderメソッドを呼び出してテキストを生成できます。
<script id="itemTemplate" type="text/x-jsrender"> {{myIf true}} この文は表示されます。 {{/myIf}} {{myIf false}} この文は表示されません。 {{/myIf}} </script>
$.views.tags("myIf", function(condition){ if(condition) return this.tagCtx.render(); else return ""; });
例として、引数の値が真の場合のみ値を出力するカスタムタグを定義しました。カスタムタグmyIfは引数を1つ取ります。{{myIf true}}や{{myIf false}}のtrueやfalseが引数で、conditionとしてmyIf関数に渡されます。そして、その値が真の場合renderメソッドを呼び出します。
複数の引数を取るカスタムタグを定義することもできます。複数の引数を指定するには、{{カスタムタグ 引数1 引数2}}のように、タグの中にスペース区切りで複数の引数を指定します。
また、タグの中にパラメーターを指定できます。{{カスタムタグ パラメーター名=パラメーター値}}のようにパラメーターを指定します。カスタムタグ関数では、this.tagCtx.props連想配列経由でパラメーターの値を取得します。
<script id="itemTemplate" type="text/x-jsrender"> 名前:{{name firstName lastName order="LastFirst"/}} </script>
$.views.tags("name", function(firstName, lastName){ if(this.tagCtx.props.order == "LastFirst") return lastName + ", " + firstName; else return firstName + " " + lastName; });