Question

我正在迭代一个项目列表：

{{#each myList as |myItem|}}
    ...do stuff...
{{/each}}

但我想抓住每4件物品。像这样：

{{#each myList as |item1 item2 item3 item4|}}
    ...do stuff...
{{/each}}

我试过这个，但它没有用。有没有办法抓住每一件X物品？如果是，解决方案是否可扩展？

Answer 1

把手不直接支持此功能。我建议在某个对象上使用计算属性。在这里，我将model称为数组，但它可以是任何内容：

setSize: 4,
modelSet: Ember.computed("model", () => {
  let model= this.get('model');
  let setSize= this.get('setSize');
  let offset= 0;
  let result= [];

  while (offset < model.length) {
    result.push(model.slice(offset, offset+setSize));
    offset+= setSize;
  }
  return result;
}

现在，在模板中迭代时：

{{#each modelSet as |items|}}
  {{item.0}} {{item.1}} ...etc...
{{/each}}

Answer 2

如果分割的固定大小为4对你有好处，那么使用无标记组件很容易实现你想要的效果。请查看following twiddle。内部使用each-by-4的{{1}}组件可以满足您的需求，因此它可以轻松地在您的应用程序中重复使用它。

然而;如果固定长度4不够好而你需要动态分裂长度（我的意思是有时3，其他时间是5，依此类推），如果不是不可能的话，很难达到你想要的效果。我的意思是：

each-helper

如果在动态分割大小方面，以下内容足够好;

{{#each myList as |item1 item2 item3 item4|}}
    ...do stuff...
{{/each}}

请查看我提供的同一个旋律中的{{#each-n list 4 as |subList|}} {{subList.item1}} {{subList.item2}} {{subList.item3}} {{subList.item4}} {{/each-n}}组件。这种方法似乎更可重用;因为它允许任何尺寸分裂。我希望这会对你有所帮助。

Answer 3

我将在这里添加我的答案，使用ember-loadash addon，安装运行以下命令，

ember install ember-lodash

要单独包含所需的数组函数，您可以像import _array from 'lodash/array';

一样导入它

您可以定义junkedList计算属性，该属性取决于myList。或者您可以使用_array.chunk方法直接将其创建为junkedList。

import Ember from 'ember';
import _array from 'lodash/array';
export default Ember.Controller.extend({
    chunkSpan: 4,
    junkedList: Ember.computed('myList', function() {
        return _array.chunk(this.get('myList').toArray(), this.get('chunkSpan'));
    }),
});

迭代，

{{#each junkedList as |groupedItems|}}
   {{#each groupedItems as |item|}}  
     //design using item
   {{/each}}
{{/each}}

另一个选项，安装ember-composable-helper addon ember install ember-composable-helper插件并使用chunk帮助，

参考：https://github.com/DockYard/ember-composable-helpers#chunk

{{#each (chunk 4 junkedList) as |groupedItems|}}
       {{#each groupedItems as |item|}}  
         //design using item
       {{/each}}
{{/each}}

总是有多种方式，但选择权在你手中。

Handlebar helper迭代每X个项目

3 个答案: