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="js/jsrender.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    // コンバータ"lower"を登録する
    $.views.converters('lower', function(text) {
        return text != undefined ? String(text).toLowerCase() : text === null ? text : "";
    });

    // 複数のコンバータをまとめて登録する
    $.views.converters({
        upper: function(text) {
            return text != undefined ? String(text).toUpperCase() : text === null ? text : "";
        },
        ucfirst: function(text) {
            return text != undefined && text.length > 0
                ? String(text)[0].toUpperCase() + String(text).substring(1).toLowerCase()
                : (text === null ? text : "");
        }
    });

    // 表示するデータ
    var text = 'JsRender';

    // テンプレートに名前を付けて登録。
    $.templates({
        linkTemplate: "#template"
    });

    // レンダリング結果を表示
    $('#result').html(
        $.render.linkTemplate(text)
    );
});
</script>

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

説明

JsRenderでは、独自のコンバータを追加することもできます。
コンバータ本体は通常のJavaScript関数・オブジェクトメソッドとして記述し、$.views.convertersメソッドを使ってコンバータ名と共に登録します。以下は、"lower"コンバータを登録する例です。

    $.views.converters('lower', function(text) {
        return text != undefined ? String(text).toLowerCase() : text === null ? text : "";
    });

また、$.views.convertersメソッドに、コンバータ名をプロパティ名とするオブジェクトを渡して複数を一度に登録することもできます。

    $.views.converters({
        upper: function(text) {
            return text != undefined ? String(text).toUpperCase() : text === null ? text : "";
        },
        ucfirst: function(text) {
            return text != undefined && text.length > 0
                ? String(text)[0].toUpperCase() + String(text).substring(1).toLowerCase()
                : (text === null ? text : "");
        }
    });

登録したコンバータは、他のコンバータと同様に使用できます。

{{upper:#data}}

JSFiddleで動作を見る

参照