首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何遍历Handlebar中的对象数组?

如何遍历Handlebar中的对象数组?
EN

Stack Overflow用户
提问于 2014-03-28 03:05:36
回答 6查看 201.7K关注 0票数 123

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

我遇到了这个Web API,它返回JSON格式的对象数组:

Handlebar docs如下例所示:

代码语言:javascript
复制
<ul class="people_list">
  {{#each people}}
  <li>{{this}}</li>
  {{/each}}
</ul>

在以下情况下:

代码语言:javascript
复制
{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley"
  ]
}

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

第一次用车把..。我遗漏了什么?

更新

这是一个简化的小提琴,向您展示我想要的:http://jsfiddle.net/KPCh4/2/

handlebars是否要求上下文变量是对象而不是数组?

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2014-03-28 03:19:39

您可以将this传递给每个块。查看此处:http://jsfiddle.net/yR7TZ/1/

代码语言:javascript
复制
{{#each this}}
    <div class="row"></div>
{{/each}}
票数 179
EN

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中使用以下代码:

代码语言:javascript
复制
<div id="small-content-placeholder"></div>

以下内容可以放在html的header或body中:

代码语言:javascript
复制
<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>

下面的文档已经准备好了:

代码语言:javascript
复制
var small_source   = $("#small-template").html();
var small_template = Handlebars.compile(small_source);

下面是json:

代码语言:javascript
复制
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:

代码语言:javascript
复制
$("#small-content-placeholder").html(small_template(small_data));

Eg2:使用each的迭代。

考虑下面的json。

代码语言:javascript
复制
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时,只需这样命名:

代码语言:javascript
复制
$("#big-content-placeholder").html(big_template({big_data:big_data}));

模板看起来像这样:

代码语言:javascript
复制
<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>
票数 26
EN

Stack Overflow用户

发布于 2014-03-28 03:18:16

我的意思是在template()调用中..

您只需要将结果作为对象传递即可。因此,与其调用

代码语言:javascript
复制
var html = template(data);

代码语言:javascript
复制
var html = template({apidata: data});

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

http://jsfiddle.net/KPCh4/4/上演示

(删除了一些崩溃的遗留if代码)

票数 12
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22696886

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档