Do You PHP はてブロ

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

JsRenderチュートリアル - テンプレートに名前を付けて管理する

JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsRender入門 - Do You PHP はてなも参照してください。

今回やること

JsRenderを使って、テンプレートに名前を付けて管理する

コード

<html>
<body>

<!-- レンダリング結果を表示するスペース -->
<div id="result_greets"></div>
<hr/>
<div id="result_fruits"></div>

<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jsviews.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    // データは文字列の配列
    var greets = [
        "こんにちは",
        "Hello"
    ];
    // データはオブジェクトの配列
    var fruits = [
        { name: "りんご", num: 3 },
        { name: "いちご", num: 5 },
        { name: "バナナ", num: 2 }
    ];


    // テンプレートに名前を付けて登録。
    $.templates({
        greetsTemplate: "#template_greets",
        fruitsTemplate: "<p>{{>name}}が{{>num}}個あります</p>"
    });


    // 各テンプレートをレンダリング
    $('#result_greets').html(
        $.render.greetsTemplate(greets)
    );
    $('#result_fruits').html(
        $.render.fruitsTemplate(fruits)
    );
});
</script>

<!-- テンプレート -->
<script id="template_greets" type="text/x-jsrender">
    <p>{{>#data}} !</p>
</script>
</body>
</html>

説明

テンプレートの数が多くなる、あるいは、使い回しをする場合、テンプレートに名前を付けて管理できると楽になる場合があります。JsRenderもテンプレートに名前を付けて管理できます。テンプレートに名前をつける場合は、$.templates

  • テンプレートの名前
  • テンプレートへのセレクタ文字列、あるいは、テンプレート文字列

を渡します。

    $.templates({
        greetsTemplate: "#template_greets",
        fruitsTemplate: "<p>{{>name}}が{{>num}}個あります</p>"
    });

一方、名前を付けたテンプレートを利用する場合、$.renderオブジェクトに先ほどのテンプレート名を名前に持つメソッドが用意されますので、それを使用します。

        $.render.greetsTemplate(greets)

戻り値はレンダリング結果です。

JSFiddleで動作を見る