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() {
    var items = [
        { name: "りんご", num: 3 },
        { name: "いちご", num: 5 },
        { name: "バナナ", num: 2, unit: '本', getUnit: function() { return this.unit; } }
    ];

    // 表示するデータ
    var model = {
        items: items,
        unit: function(item) {
            if (item.unit === undefined) {
                return '個';
            }

            return item.unit;
        }
    };

    // テンプレートに名前(ここでは"linkTemplate")をつけて登録する
    $.templates({
        linkTemplate: "#template"
    });

    // テンプレート"linkTemplate"に変数modelを渡し、
    // レンダリング結果を表示
    $('#result').html($.render.linkTemplate(model));
});
</script>

<!-- テンプレート -->
<script id="template" type="text/x-jsrender">
{{for items}}
    <p>{{:name}}が{{:num}}{{:~root.unit(#data)}}あります</p>
    {{if getUnit}}
        <p>{{:name}}が{{:num}}{{:getUnit()}}あります</p>
    {{/if}}
{{/for}}
</script>
</body>
</html>

説明

テンプレートに渡されたオブジェクトのメソッド呼び出しも変数と同様に行えます。

JSFiddleで動作を見る

参照