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">
// ループ - propsタグ
$(function() {
    // 表示するデータ(オブジェクト)
    var fruits = { name: "りんご", num: 3 };

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

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

<!-- テンプレート -->
<script id="template" type="text/x-jsrender">
{{props #data}}
    <p>{{>key}}の値は{{>prop}}です</p>
{{/props}}
</script>
</body>
</html>

説明

JsRenderのfor文はPHPと異なり配列に対してのみ有効です。PHPで言うところのforeachに相当する構文はpropsタグになります。

    {{props [オブジェクト]}}
         ：
    {{/props}}

propsによるループ中、キーと値はそれぞれ"key"、"prop"で参照できます。

{{props #data}}
    <p>{{>key}}の値は{{>prop}}です</p>
{{/props}}

JSFiddleで動作を見る

参照