如何遍历Handlebar中的对象数组？
这似乎是一个愚蠢的问题，但我似乎在任何地方都找不到答案。
我遇到了这个Web API，它返回JSON格式的对象数组：
Handlebar docs如下例所示：
<ul class="people_list">
{{#each people}}
<li>{{this}}</li>
{{/each}}
</ul>在以下情况下：
{
people: [
"Yehuda Katz",
"Alan Johnson",
"Charles Jolley"
]
}在我的例子中，我没有数组的名称，它只是响应的根对象。我尝试过使用{{#each}}，但没有成功。
第一次用车把..。我遗漏了什么？
更新
这是一个简化的小提琴，向您展示我想要的：http://jsfiddle.net/KPCh4/2/
handlebars是否要求上下文变量是对象而不是数组？
回答 6
Stack Overflow用户
发布于 2014-03-28 03:19:39
您可以将this传递给每个块。查看此处：http://jsfiddle.net/yR7TZ/1/
{{#each this}}
<div class="row"></div>
{{/each}}Stack Overflow用户
发布于 2014-09-12 16:19:50
这个提琴既有each也有direct json。http://jsfiddle.net/streethawk707/a9ssja22/。
下面是迭代数组的两种方法。一种是直接传递json，另一种是在传递给content holder时命名json数组。
Eg1:下面的例子是直接调用small_data变量内部的json key (data)。
在html中使用以下代码：
<div id="small-content-placeholder"></div>以下内容可以放在html的header或body中：
<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附加到content holder：
$("#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>Stack Overflow用户
发布于 2014-03-28 03:18:16
我的意思是在template()调用中..
您只需要将结果作为对象传递即可。因此，与其调用
var html = template(data);做
var html = template({apidata: data});并在您的模板代码中使用{{#each apidata}}
在http://jsfiddle.net/KPCh4/4/上演示
(删除了一些崩溃的遗留if代码)
https://stackoverflow.com/questions/22696886
复制相似问题
腾讯云开发者
