0

私は実際には JSON オブジェクトでこれを行っていますが、この質問については単純化します。Handlebars テンプレートを正しくビルドできないようです。これは私が渡しているオブジェクトのサンプル配列です:

    var data = {
        DocumentInfo: [
            {
                Category: "General",
                DocumentList: [
                    {
                        DocumentName: "Document Name 1 - General",
                        DocumentLocation: "Document Location 1 - General"
                    },
                    {
                        DocumentName: "Document Name 2 - General",
                        DocumentLocation: "Document Location 2 - General"
                    }
                ]
            },
            {
                Category: "Unit Documents",
                DocumentList: [
                    {
                        DocumentName: "Document Name 1 - Unit Documents",
                        DocumentList: "Document Location 1 - Unit Documents"
                    }
                ]
            },
            {
                Category: "Minutes"
            }
        ]
    };

これが Handlebars テンプレートと Div です。

<div id="DocumentResults"></div>

<script id="document-template" type="text/x-handlebars-template">
    <div>
        {{#if DocumentInfo}}
            {{#DocumentInfo}}
                {{#Category}}
                    <div class="row">
                        <div class="col-md-12">
                            <h2>{{this}}</h2>
                            {{#DocumentList}}
                                <p>{{DocumentName}} at {{DocumentLocation}}</p>
                            {{/DocumentList}}
                        </div>
                    </div>
                {{/Category}}
            {{/DocumentInfo}}
        {{else}}
            <p>There are no documents available at this time</p>
        {{/if}}
    </div>
</script>

最後に、Handlebars 出力を作成する JavaScript を次に示します。

    var source = $.trim($("#document-template").html());
    var template = Handlebars.compile(source);
    var $docData = $(template(data));
    $("#DocumentResults").empty().append($docData);

問題は、生成されるのはヘッダー フィールドだけです。カテゴリごとに他の配列 (DocumentList) を反復処理しないのはなぜですか? そして、表示するヘッダー値を取得できる唯一の方法は、{{this}} を使用することです。{{Category}} に置き換えると、何も表示されません。ここで何が間違っているのかわかりません。

4

1 に答える 1

0

この jsfiddle を確認してください: http://jsfiddle.net/KPCh4/

var source = $("#document-template").html();
var template = Handlebars.compile(source);
var html = template(data);
$('#DocumentResults').html(html);

私はまだ反復のために {{#each}} に集中していました。#実際にはショートカットです。{{Category}}と を混同しないでください{{#Category}}。前者はプロパティの値を出力します。後者はリストです（ を参照#）。

私はあなたにスニペットをきめ細かくさせました:)

お役に立てれば、

R.

于 2013-09-26T07:44:59.457 に答える