如何迭代Handlebars中的对象数组？

Question

这似乎是一个愚蠢的问题,但我似乎无法在任何地方找到答案.

我正在点击这个以ASON格式返回对象数组的Web Api:

Handlebars docs显示以下示例:

<ul class="people_list">
  {{#each people}}
  <li>{{this}}</li>
  {{/each}}
</ul>

在以下情况下:

{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley"
  ]
}

在我的情况下,我没有数组的名称,它只是响应的根对象.我试过{{#each}}没有运气.

第一次使用把手......我错过了什么？

UPDATE

这是一个简化的小提示,以显示我在问什么:http://jsfiddle.net/KPCh4/2/

把手是否需要将上下文变量作为对象而不是数组？

Answer 1

你可以传递this到每个块.见这里:http://jsfiddle.net/yR7TZ/1/

{{#each this}}
    <div class="row"></div>
{{/each}}

Answer 2

这个小提琴有each和直接json.http://jsfiddle.net/streethawk707/a9ssja22/.

以下是迭代数组的两种方法.一个是直接json传递,另一个是在传递给内容持有者时命名json数组.

Eg1:下面的例子直接调用small_data变量中的json key(data).

在html中使用以下代码:

<div id="small-content-placeholder"></div>

下面可以放在html的标题或正文中:

<script id="small-template" type="text/x-handlebars-template">
    <table>
        <thead>
            <th>Username</th>
            <th>email</th>
        </thead>
        <tbody>
            {{#data}}
                <tr>
                    <td>{{username}}
                    </td>
                    <td>{{email}}</td>
                </tr>
            {{/data}}
        </tbody>
    </table>
</script>

以下是文件就绪:

var small_source   = $("#small-template").html();
var small_template = Handlebars.compile(small_source);

以下是json:

var small_data = {
            data: [
                {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "alan1@test.com" },
                {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "alan2@test.com" }
            ]
        };

最后将json附加到内容持有者:

$("#small-content-placeholder").html(small_template(small_data));

Eg2:使用每个迭代.

考虑下面的json.

var big_data = [
            {
                name: "users1",
                details: [
                    {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },
                    {username: "allison1", firstName: "Allison", lastName: "House", email: "allison@test.com" },
                    {username: "ryan1", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }
                  ]
            },
            {
                name: "users2",
                details: [
                    {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },
                    {username: "allison2", firstName: "Allison", lastName: "House", email: "allison@test.com" },
                    {username: "ryan2", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }
                  ]
            }
      ];

将json传递给内容持有者时,只需将其命名为:

$("#big-content-placeholder").html(big_template({big_data:big_data}));

模板看起来像:

<script id="big-template" type="text/x-handlebars-template">
    <table>
        <thead>
            <th>Username</th>
            <th>email</th>
        </thead>
        <tbody>
            {{#each big_data}}
                <tr>
                    <td>{{name}}
                            <ul>
                                {{#details}}
                                    <li>{{username}}</li>
                                    <li>{{email}}</li>
                                {{/details}}
                            </ul>
                    </td>
                    <td>{{email}}</td>
                </tr>
            {{/each}}
        </tbody>
    </table>
</script>

Answer 3

我的意思是在template()电话里..

您只需将结果作为对象传递.所以不要打电话

var html = template(data);

做

var html = template({apidata: data});

并{{#each apidata}}在您的模板代码中使用

在http://jsfiddle.net/KPCh4/4/演示
(删除了一些if崩溃的剩余代码)

Answer 4

把手可以使用数组作为上下文。您可以将其.用作数据的根。因此，您可以使用循环遍历数组数据{{#each .}}。

var data = [
  {
    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"
  }
];

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

.row {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="DocumentResults">pos</div>
<script id="document-template" type="text/x-handlebars-template">
  <div>
  {{#each .}}
    <div class="row">
      <div class="col-md-12">
        <h2>{{Category}}</h2>
        {{#DocumentList}}
        <p>{{DocumentName}} at {{DocumentLocation}}</p>
        {{/DocumentList}}
      </div>
    </div>
  {{/each}}
  </div>
</script>

Answer 5

我有一个类似的问题，我正在获取整个对象，this但在执行#each.

解决方案：我像这样重新构造我的对象数组：

let list = results.map((item)=>{
    return { name:item.name, author:item.author }
});

然后在模板文件中：

{{#each list}}
    <tr>
        <td>{{name }}</td>
        <td>{{author}}</td>      
    </tr>
{{/each}}