EachChunk

components.each-chunk.js

import Ember from 'ember';

const { Component } = Ember;

export default class EachChunk extends Component {};

EachChunk.tagName = '';

EachChunk.reopenClass({
  positionalParams: ['items', 'chunkSize']
});

components.simple-element.js

import Ember from 'ember';

const { Component } = Ember;

export default class SimpleElement extends Component {};

SimpleElement.reopenClass({
  positionalParams: ['tagName']
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  items: [
    'Chris', '@runspired', 'James', 'Wesley', 'Zach', 'Jill', 'Tanya', 'Renee', 'Rosemary', 'Thomas', 'John'
  ]
});

helpers.chunk.js

import Ember from 'ember';

export function chunk(params/*, hash*/) {
  let [items, chunkSize] = params;
  let chunks = [];
  
  for (let i = 0; i < items.length; i++) {
    let chunk = [];
    chunks.push(chunk);
    
    for (let j = 0; j < chunkSize && i < items.length; j++, i++) {
      chunk.push({
        item: items[i],
        index: i
      });
    }
  }
  
  return chunks;
}

export default Ember.Helper.helper(chunk);

templates.application.hbs

<h1>Chunking Lists (for grids)</h1>

<br>

<table>
  <tbody>
    {{#with (component 'simple-element' 'tr') as |row|}}
    
    {{#each-chunk items 3 chunkContainer=row as |item index row col|}}
      <td>{{row}}:{{col}} <b>{{item}}</b> <i>item {{index}}</i></td>
    {{/each-chunk}}
    
    {{/with}}
  </tbody>
</table>

templates.components.each-chunk.hbs

{{#each (chunk items chunkSize) as |chunk chunkIndex|}}
  {{#component chunkContainer index=chunkIndex}}
    {{#each chunk as |chunkItem chunkPosition|}}
      {{yield chunkItem.item chunkItem.index chunkIndex chunkPosition}}
    {{/each}}
  {{/component}}
{{/each}}

templates.components.simple-element.hbs

{{yield}}

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0"
  }
}