Do You PHP はてブロ

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

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>
{{log #data/}}
</script>
</body>
</html>

説明

JsRenderでは、独自のタグを追加することができます。基本的な構文は以下のようになります。

$.views.tags([タグ名], [JavaScriptの関数]);
  もしくは
$.views.tags([プロパティ名がタグ名、値がJavaScriptの関数のオブジェクト]);

コード例では、前者の書式で、渡された値をブラウザの開発ツールやデベロッパーツールのコンソールにそのまま出力する"log"というタグを定義しています。
複数同時に登録する場合は、後者の書式で登録します。

    $.views.tags({
        log: function(obj) {
            console.log('%cDebug', 'color: red;', obj);
        },
        anotherTag: function(obj) {
            ...
        }
    });

JSFiddleで動作を見る