Do You PHP はてブロ

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

JsRenderチュートリアル - テンプレートにヘルパーを渡す

jsviews

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

今回やること

ヘルパーの定義と使い方の説明

コード

<html>
<body>

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

<style type="text/css">
<!--
.blue { color: #3face0; }
.red { color: #e03fac; }
-->
</style>
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jsrender.min.js" type="text/javascript"></script>
<script type="text/javascript">
// ヘルパーの定義と使い方
$(function() {
    // 表示するデータ
    var items = [
        { name: "りんご", num: 3 },
        { name: "いちご", num: 5 },
        { name: "バナナ", num: 2, unit: '本' }
    ];

    // ヘルパーの定義
    var helper = {
        unit: function(data) {
            if (data.unit === undefined) {
                return 'こ';
            }

            return data.unit;
        },
        color: "blue"
    };

    // ヘルパーをJsRenderに登録する場合(1)
    //
    // ただし、render時にヘルパーが渡された場合、
    // 同名のメソッドやプロパティは上書きされる
    $.views.helpers({
        unit: function(data) {
            if (data.unit === undefined) {
                return '個';
            }

            return data.unit;
        },
        color: "red",
        greet: "こんにちは！"
    });

    // ヘルパーをJsRenderに登録する場合(2)
    //
    // $.views.helpersで登録した同名のヘルパーメソッド、プロパティは
    // 後勝ちとなる
    $.views.helpers("greet", "Hello !");


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

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

<!-- テンプレート -->
<script id="template" type="text/x-jsrender">
    <p>
        <span>{{>~greet}}</span>
        <span class="{{>~color}}">{{:name}}</span>が{{:num}}{{:~unit(#data)}}あります
    </p>
</script>
</body>
</html>

説明

JsRenderチュートリアル - テンプレートに渡したオブジェクトのメソッドを呼び出す - Do You PHP はてなではレンダリングする際にメソッドを含むデータをテンプレートに渡しましたが、JsRenderではヘルパーと呼ばれるオブジェクトを第2引数に渡すこともできます。
このヘルパーにメソッドやプロパティを定義しておくと、テンプレート内から呼び出し・参照することができます。
この場合、"~"(チルダ)を使ってメソッド名やプロパティ名を指定します。

~[メソッド名]([引数], ...)
~[プロパティ名]

また、ヘルパーをJsRender自身に登録することもできます。この場合の構文は以下のようになります。

$.views.helpers([ヘルパー名], [JavaScriptの関数やプロパティの値]);
  もしくは
$.views.helpers([プロパティやメソッドを含むオブジェクト]);

コード例ではJsRenderにヘルパーを2回登録し、またrender時にもヘルパーを渡していますが、この場合に同名のメソッドやプロパティがあった場合は、それぞれ

render時に渡されたヘルパー ＞ JsRenderに登録したヘルパー(2) ＞ JsRenderに登録したヘルパー(1)

という具合に上書きされます。

JSFiddleで動作を見る

参照