如何使用Handlebars循环数组对象和模板
How to loop over array objects and template with Handlebars
我在使用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}}
:中使用
http://jsbin.com/loveci/1/edit?html,js,输出
试着围绕模板块编写{{#.}}{/.},这会在Mustache.js中循环一个数组,这个数组是基于handlers构建的。(不确定,但我记得我用这种方式解决了类似的问题,所以值得快速尝试)
相关文章:
- Javascript(Angular)从一个对象数组到第二个数组查找值
- 在Javascript中转换对象数组
- 在JavaScript中通过索引从对象数组中获取值
- Backbone虹吸以获取对象数组
- 如何在DataTables 2.1中迭代对象数组
- Javascript-根据赋值顺序,按键合并对象数组
- 将事件附加到对象/数组
- jQuery$.inArray()总是返回-1和一个对象数组
- javascript处理一个对象数组以获得一个新的对象数组
- javascript在数组中获取对象数组中键的所有不同值
- 在对象数组中查找多个值的d3范围
- Undercore.js获取对象数组中键对象的值
- 在mongoose中使用正则表达式在对象数组中进行查询搜索
- 如何通过json对象数组为嵌套对象赋值
- 如何循环通过2个对象数组并通过匹配id进行合并
- 为对象数组创建列表项
- 如何使用javascript合并两个对象数组
- JSON到对象数组,并向每个对象添加项
- JavaScript:从对象数组中获取唯一值及其计数
- 按不同项目对对象数组进行排序