迭代 Handlebars 中的对象数组答案

【问题标题】：Iterating over array of objects in Handlebars迭代 Handlebars 中的对象数组
【发布时间】：2013-10-01 14:02:55
【问题描述】：

我实际上是在 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}} 替换它，则不会显示任何内容。我看不出我在这里做错了什么。

【问题讨论】：

模板内没有循环。
我对此感到困惑。我认为实际上有三个循环。一个用于 DocumentInfo，一个用于 Category，一个用于 DocumentList。我已经用 {{#each DocumentInfo}}、{{#each Category}} 和 {{#each DocumentList}} 进行了尝试，得到了相同的结果。我缺少与模板内的循环有关的什么？

标签： javascript arrays loops object handlebars.js

【解决方案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}}。前者输出一个属性的值；后者是一个列表（参见#）。

我让你细粒度的 sn-p :)

希望这会有所帮助，

【讨论】：

罗兰，谢谢。我看到小提琴工作正常，但我不明白为什么需要删除 {{#Category}} 的块助手。我没有将 {{#Category}} 误认为 {{Category}}。 {{#Category}} 是用于迭代块类别的块助手。 {{Category}} 应该显示 Category 的值。然而，我认为我们的函数做同样的事情。我知道它按照我最初的方式工作，因为我已经在生产中运行了该代码。似乎需要对模板进行更改。我将使用我的模板，看看我能生成什么（我希望是正确的）。谢谢。
好吧，我将被浸入热蜡中！需要对模板进行这些细微的更改。我仍然不太明白为什么删除 {{#Category}} 块是必要的，但我与谁争论成功？我想我最好再读一遍那些东西。直到现在我还以为我理解得很好。再次感谢！
Category 不是数组，只有数组/列表可以以# 为前缀。 {{Category}} 在这种情况下返回单个字符串。很高兴我帮助了你！ :)