迭代数组并使用元素索引打印另一个数组。 Handleblar - Ember.js答案

【问题标题】：Iterate array and with index of element print another array. Handleblar - Ember.js迭代数组并使用元素索引打印另一个数组。 Handleblar - Ember.js
【发布时间】：2017-09-08 05:25:16
【问题描述】：

我想遍历车把中的一个数组，并使用每个元素的索引打印我定义的其他 json 或数组中的一个元素。

类似这样的：

{{#each groups as |group index|}}
    {{#sticky-element top=41}}
       {{ad-component data=adGroup.[index].ad2 class="average-ad"}}
    {{/sticky-element}} 
{{/each}}

我的组件是这样的：

import Ember from 'ember';

export default Ember.Component.extend({
  adGroup: {
    '0': {"ad1": "div-gpt-ad-123-0", "ad2": "div-gpt-ad-123-4"},
    '1': {"ad1": "div-gpt-ad-123-1", "ad2": "div-gpt-ad-123-5"},
    '2': {"ad1": "div-gpt-ad-123-2", "ad2": "div-gpt-ad-123-3"}
  }
});

但遗憾的是，在车把上是不可能做到这一点的。

有些人建议我使用计算属性，但我如何为这个任务创建计算属性？

我不知道这最后两天是不是我的幸运日或发生了什么，因为我认为这很简单，但我不能这样做，请帮忙？

【问题讨论】：

groups 是什么，为什么要循环播放它？你甚至需要group？因为，为此您可以直接使用each-in 循环遍历adGroup。

标签： ember.js handlebars.js

【解决方案1】：

如果您将adGroup 构造为数组而不是对象

adGroup: [
  {"ad1": "div-gpt-ad-123-0", "ad2": "div-gpt-ad-123-4"},
  {"ad1": "div-gpt-ad-123-1", "ad2": "div-gpt-ad-123-5"},
  {"ad1": "div-gpt-ad-123-2", "ad2": "div-gpt-ad-123-3"}
]

你可以使用 ember-composable-helpers

ember install ember-composable-helpers

并得到类似的值

{{#each groups as |group index|}}
  {{#sticky-element top=41}}
   {{ad-component data=(get (object-at index adGroup) 'ad1') class="small-ad"}}
  {{/sticky-element}}
{{/each}}

【讨论】：

如果 groups 是 adGroup，则循环遍历数组可能只是 data=group.ad1，则不需要索引。