SHOEISHA iD

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

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

徹底解説JsRender/JsViews

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

徹底解説JsRender/JsViews 第4回

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

カスタムタグ

 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:カスタムタグ
図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:開始タグと終了タグを使用するカスタムタグ
図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;
});

次のページ
ヘルパー

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング