如何使用Handlebars循環遍歷數組對象和模板

Question

我在使用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}}周圍添加{{#each this}} ，但這是不正確的。

Answer 1

在您的有效負載中添加密鑰，並在{{#each}}使用它：

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

Answer 2

嘗試在模板塊周圍編寫{{＃。}} {{/。}}，這會在Mustache.js中循環一個構建手柄的數組。 （不確定，但我記得我用這種方式解決類似問題，所以值得快速嘗試）