如何在 Handlebars 迭代对象数组？

这似乎是一个愚蠢的问题，但我似乎在任何地方都找不到答案。

我正在使用这个 Web API，它返回一个 JSON 格式的对象数组:

array of objects

把手文档显示了以下示例:

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

在下列情况下:

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

在我的例子中，我没有数组的名称，它只是响应的根对象。我试过使用 {{#each}}，但没有成功。

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

更新

这里有一个简化的小提琴，告诉你我所要求的: http://jsfiddle.net/KPCh4/2/

把手是否要求上下文变量是一个对象而不是一个数组？

232461 次浏览
小开

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

您只需要将结果作为对象传递

var html = template(data);

做

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

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

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

小开
最佳答案

您可以将 this传递给每个块

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

此小提琴同时具有 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: 使用 each 进行迭代。

考虑下面的 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 传递给 content holder 时，只需按以下方式命名它:

$("#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>
小开

句柄可以使用数组作为上下文。您可以使用 .作为数据的根。因此，可以使用 \{\{#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>

小开

使用 this和 \{\{this}}。请参阅 node.js 中的代码:

var Handlebars= require("handlebars");
var randomList= ["James Bond", "Dr. No", "Octopussy", "Goldeneye"];
var source= "<ul>\{\{#each this}}<li>\{\{this}}</li>\{\{/each}}</ul>";
var template= Handlebars.compile(source);
console.log(template(randomList));

控制台日志输出:

<ul><li>James Bond</li><li>Dr. No</li><li>Octopussy</li><li>Goldeneye</li></ul>
小开

我有一个类似的问题，我得到了整个对象在 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}}

提交答案