用于迭代每 X 个项目的把手助手

Question

我正在迭代项目列表：

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

但我想每 4 件都抢一次。像这样：

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

我试过了，还是不行。有没有办法抓取所有 X 项？如果是，解决方案是否可扩展？

Answer 1

Handlebars 不直接支持此功能。我建议在某些对象上使用计算属性。在这里，我指的是 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 组件在内部使用 each-helper 做你想做的事情，因此它是一个你可以在你的应用程序中轻松重用它的组件。

但是；如果固定长度 4 不够好并且您需要动态拆分长度（我的意思有时是 3，其他时候是 5，等等），如果不是不可能的话，真的很难实现您想要的。我的意思是：

{{#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}}

请检查我提供的同一 twiddle 中的 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}}

总是有多种方法，但选择权在你。

用于迭代每 X 个项目的把手助手

Handlebar helper to iterate every X number of items

ember.js