so#44265137

components.each-by-4.js

import Ember from 'ember';
const {computed, Component} = Ember;

const eachBy4 = Component.extend({
  tagName:'',
  subLists: computed('list', 'splitSize', function() {
    let list = this.get('list');
    let splitSize = 4;
    let result = [];
    
    for (let i = 0; i < list.length; i=i+splitSize) {
      result.push(list.slice(i, i+splitSize));
    }
    
    return result;
  })
});

eachBy4.reopenClass({
  positionalParams: ['list']
});

export default eachBy4;

components.each-n.js

import Ember from 'ember';
const {computed, Component} = Ember;

const eachn = Component.extend({
  tagName:'',
  subJsons: computed('list', 'splitSize', function() {
    let list = this.get('list');
    let splitSize = this.get('splitSize');
    let result = [];
    
    for (let i = 0; i < list.length; i=i+splitSize) {
      let newJSON = {};
      for (let j = i; j < i+splitSize; j++) {
        newJSON[`item${(j-i+1)}`] = list[j];
      }
      
      result.push(newJSON);
    }
    
    return result;
  })
});

eachn.reopenClass({
  positionalParams: ['list', 'splitSize']
});

export default eachn;

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  list: [1,2,3,4,5,6,7,8,9,10,11]
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
Fixed splitting by 4:
<br>
{{#each-by-4 list as |item1 item2 item3 item4|}}
	{{item1}} {{item2}} {{item3}} {{item4}}
  <br>
{{/each-by-4}}

<br>
Below is dynamic splitting:
<br>

Split by 3<br>
{{#each-n list 3 as |subList|}}
	{{subList.item1}} {{subList.item2}} {{subList.item3}}
  <br>
{{/each-n}}
<br>

Split by 4<br>

{{#each-n list 4 as |subList|}}
	{{subList.item1}} {{subList.item2}} {{subList.item3}} {{subList.item4}}
  <br>
{{/each-n}}
<br>

Split by 5<br>
{{#each-n list 5 as |subList|}}
	{{subList.item1}} {{subList.item2}} {{subList.item3}} {{subList.item4}} {{subList.item5}}
  <br>
{{/each-n}}
<br>
<br>

{{each-by-4 list}}

templates.components.each-by-4.hbs

{{#each subLists as |subList|}}
	{{yield (get subList '0') (get subList '1') (get subList '2') (get subList '3')}}
{{/each}}

templates.components.each-n.hbs

{{#each subJsons as |subJson|}}
	{{yield subJson}}
{{/each}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}