Do You PHP はてブロ

Do You PHPはてなからはてブロに移動しました

JsRenderチュートリアル - テンプレートで使える特殊な変数とその中身

jsviews

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 テンプレートに渡されたデータのトップレベル

JSFiddleで動作を見る

参照