在Handlebars中遍历数组对象 [英] Iterating over array of objects in Handlebars

问题描述

我实际上是在一个JSON对象中做这件事，但对于这个问题，我会简化。我似乎无法让我的Handlebars模板正确构建。这里是我传递的一个对象样本数组：

  var data = {
 DocumentInfo：[
 {
类别：常规，
 DocumentList：[
 {
文档名称：文档名称1-常规，
 DocumentLocation：文档位置1  - 常规
，
 {
文档名称：文档名称2-常规，
 DocumentLocation：文档位置2-常规
} 
] 
}，
 {
类别：单元文档，
 DocumentList：[
 {
文档名称：文档名称1-单元文档，
 DocumentList：文档位置1-单元文档
} 
 
}，
 {
类别：分钟
} 
] 
}; 
  

这里是Handlebars模板和Div的发展方向：

 < div id =DocumentResults>< / div> 
 
< script id =document-templatetype =text / x-handlebars-template> 
< div> 
 {{#if DocumentInfo}} 
 {{#DocumentInfo}} 
 {{#Category}} 
< div class =row> 
< div class =col-md-12> 
< h2> {{this}}< / h2>在{{DocumentLocation}}上的
 {{#DocumentList}} 
< p> {{DocumentName}}< / p> 
 {{/ DocumentList}} 
< / div> 
< / div> 
 {{/ Category}} 
 {{/ DocumentInfo}} 
 {{else}} 
< p>目前没有文件可用< / 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}}替换它，则不显示任何内容。我看不到这是什么，我在这里做错了。

检查此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。

I'm actually doing this in a JSON object but for this question, I will simplify. I can't seem to get my Handlebars template to build correctly. Here is a sample array of objects that I am passing:

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

Here is the Handlebars template and Div where it's going:

<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>

Finally, here is the JavaScript that builds the Handlebars output:

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

The problem is, the only thing that is generated are the header fields. Why won't it iterate over my other array (DocumentList) for each Category? And, the only way I can get the header values to display is to use {{this}}. If I replace it with {{Category}} nothing displays. I can't see what it is that I'm doing wrong here.

解决方案

Check this jsfiddle: http://jsfiddle.net/KPCh4/

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

I were still focused on {{#each}} for iteration; # is a shortcut actually. Do not confuse {{Category}} and {{#Category}}. The former output a property's value; the latter is a list (see the #).

I let you fine-grained the snippet :)

Hope this helps,

R.

这篇关于在Handlebars中遍历数组对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！