JsRenderチュートリアル - テンプレートで使える特殊な変数とその中身
JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsRender入門 - Do You PHP はてなも参照してください。
今回やること
テンプレートで使える特殊な変数とその中身を確認する
コード
<html> <body> <!-- レンダリング結果を表示するスペース --> <div id="result"></div> <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://www.jsviews.com/download/jsviews.min.js" type="text/javascript"></script> <script type="text/javascript"> // ハッシュ付き変数 $(function() { // デバッグ出力用タグの定義 // 渡された値をconsole.logに出力するだけ $.views.tags({ log: function(obj) { console.log('%cDebug', 'color: red;', obj); } }); // 表示するデータ var fruits = { items: [ { name: "りんご", num: 3 }, { name: "いちご", num: 5 }, { name: "バナナ", num: 2 } ] }; // テンプレートに名前(ここでは"linkTemplate")をつけて登録する $.templates({ linkTemplate: "#template" }); // テンプレート"linkTemplate"に変数fruitsを渡し、 // レンダリング結果を表示 $('#result').html($.render.linkTemplate(fruits)); }); </script> <!-- テンプレート --> <script id="template" type="text/x-jsrender"> <p>ブラウザの開発ツール/デベロッパーツール、FireBugのコンソールタブを確認して下さい</p> {{!-- このViewのオブジェクト --}} {{log #view/}} {{!-- このViewのオブジェクトの各プロパティ --}} {{log #content/}} {{log #ctx/}} {{log #data/}} {{log #linked/}} {{log #parent/}} {{log #tmpl/}} {{log #type/}} {{log #views/}} {{for items}} <p>インデックス={{>#index}}</p> {{!-- このViewのオブジェクト --}} {{log #view/}} {{!-- このViewのオブジェクトの各プロパティ --}} {{log #content/}} {{log #ctx/}} {{log #data/}} {{log #index/}} {{log #linked/}} {{log #parent/}} {{log #tmpl/}} {{log #type/}} {{log #views/}} {{/for}} {{!-- 渡されたデータのトップレベル --}} {{log ~root/}} </script> </body> </html>
説明
JsRenderチュートリアル - ループ内のタグブロック内でインデックスが取得できない - Do You PHP はてなで作成したデバッグ用タグを使って、テンプレートで使える特殊な変数を確認してみます。
現在のテンプレート(Viewオブジェクト)は、テンプレート上では#viewとして参照できます。これを使ってデバッグ出力してみると、Viewオブジェクトの各プロパティが確認できると思いますが、これらのプロパティはテンプレート上で
#[プロパティ名]
として直接参照することができます。
変数名 | 概要 |
---|---|
#content | テンプレートに渡されたコンテンツ |
#ctx | テンプレートのコンテキスト |
#data | テンプレートに割り当てられたデータ |
#index | 現在のテンプレートが配列の場合、そのインデックス |
#linked | リンクされているかどうか |
#parent | 現在のViewの親Viewオブジェクト |
#tmpl | テンプレートに関する情報を格納したオブジェクト |
#type | Viewの種類 |
#views | 現在のViewにネストされた子Viewオブジェクト |
最初のチュートリアルから「テンプレートに渡されたデータは#dataで参照できる」と書いてきましたが、実際はViewオブジェクトのプロパティを参照していた、ということです。
また、JsRenderチュートリアル - テンプレートでループのインデックスを取得する - Do You PHP はてなで使った#indexも同様で、JsRenderチュートリアル - ループ内のタグブロック内でインデックスが取得できない - Do You PHP はてなで出てきた#getIndex()は#indexが取得できない場合のみ定義されるViewオブジェクトのメソッドになります。
もう一つ、~rootという特殊な変数もあります。この変数はテンプレートに渡されたデータのトップレベルを表し、テンプレートのどの場所からでも使えます。
変数名 | 概要 |
---|---|
~root | テンプレートに渡されたデータのトップレベル |