Do You PHP はてブロ

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

JsRenderチュートリアル - for、propsタグとelseタグ

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

今回やること

テンプレート内のfor、propsタグとelseタグを組み合わせて使ってみる

コード

<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">
// for、propsタグとelseタグ
$(function() {
    // 表示するデータ
    var data = [
        {
            color: "赤",
            fruits: [
                { name: "りんご", num: 3 },
                { name: "いちご", num: 5 },
                {}
            ]
        },
        {
            color: "緑",
        },
        {
            color: "黄",
            fruits: [
                { name: "バナナ", num: 2 }
            ]
        }
    ];

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

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

<!-- テンプレート -->
<script id="template" type="text/x-jsrender">
    {{for #data tmpl="#template_item"/}}
</script>
<script id="template_item" type="text/x-jsrender">
    <h3>{{>color}}色</h3>
    {{for fruits}}
        {{props #data}}
            <p>{{>key}}の値は{{>prop}}です</p>
        {{else}}
            空っぽです!
        {{/props}}
    {{else}}
        何もありません
    {{/for}}
</script>
</body>
</html>

説明

forタグやpropsタグ、カスタムタグはelseタグと組み合わせて使うことができます。データが存在しない場合のメッセージなど、elseタグ側に条件を満たさない場合の内容を記述します。

    {{for [配列]}}
        :
    {{else}}
        :
    {{/for}}

    {{props [オブジェクト]}}
        :
    {{else}}
        :
    {{/prop}}

JSFiddleで動作を見る