如何使用 Handlebars 遍历数组对象和模板答案

【问题标题】：How to loop over array objects and template with Handlebars如何使用 Handlebars 遍历数组对象和模板
【发布时间】：2015-04-21 08:51:28
【问题描述】：

我在使用 Handlebars 模板化一些对象数据时遇到问题，对象如下所示：

[{
    slug: "slug-q",
    videoBanner: true,
    videoId: "e_pBdaN5nEY",
    videoPoster: {
        "small": "630x630_partner.jpg",
        "medium": "853x863_partner.jpg",
        "large": "1306x653_partner.jpg",
        "xlarge": "1832x704_partner.jpg"
    }
},
{
    slug: "slug-w",
    videoBanner: true,
    videoId: "e_fewf5nEY",
    videoPoster: {
        "small": "630x630_partnerY.jpg",
        "medium": "853x863_partnerY.jpg",
        "large": "1306x653_partnerY.jpg",
        "xlarge": "1832x704_partnerY.jpg"
    }
}]

还有我的模板：

<a href="http://youtu.be/{{videoId}}" class="hero-content js-vid" target="_blank">

    {{#if videoBanner}}
        <img class="hero-img preload-image js-preload-image js-poster" alt="" sizes="100%" srcset="
            /static/img/partners/{{slug}}/{{videoPoster.small}} 320w,
            /static/img/partners/{{slug}}/{{videoPoster.medium}} 640w,
            /static/img/partners/{{slug}}/{{videoPoster.large}} 1024w,
            /static/img/partners/{{slug}}/{{videoPoster.xlarge}} 1280w">
    {{else}}
        <img class="hero-img preload-image js-preload-image" alt="" sizes="100%" srcset="
            /static/img/partners/{{slug}}/{{videoPoster.small}} 320w,
            /static/img/partners/{{slug}}/{{videoPoster.medium}} 640w">
    {{/if}}
</a>

现在唯一设置的是videoId，我不确定我需要在哪里添加{{#each}} 以便循环输出数据和模板。我最初尝试在整个模板块周围添加{{#each this}}，但这是不正确的。

【问题讨论】：

stackoverflow.com/questions/22696886/…

标签： javascript handlebars.js

【解决方案1】：

为您的有效负载添加一个密钥，并在{{#each}} 中使用它：

http://jsbin.com/loveci/1/edit?html,js,output

【讨论】：

【解决方案2】：

尝试在模板块周围写 {{#.}} {{/.}}，这会在 Mustache.js 中循环一个数组，该数组是基于该数组构建的。（不确定，但我记得我用这种方式解决了类似的问题，所以值得一试）

【讨论】：