遍历在车把对象数组(Iterating over array of objects in Handl

2019-10-30 06:24发布

实际上,我这样做在一个JSON对象,但对于这个问题,我将简化。 我似乎无法让我的手把模板建立正确。 下面是我在传递对象的样本数组:

    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"
            }
        ]
    };

这里是把手模板和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>

最后,这里是建立车把输出JavaScript的:

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

问题是,所生成的唯一的事情是头字段。 为什么不会它遍历我对每个类别其他阵列(DocumentList)? 而且,我可以得到头值显示的唯一方式是使用{{此}}。 如果我用{{类别}}没有显示替换它。 我看不出它是什么,我做错了这里。

Answer 1:

选中此的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.



文章来源: Iterating over array of objects in Handlebars