x-each

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    console.log('Entered application route');
     
    let items = [];
    for (let i = 0; i < 100; i++) {
      items.push({name: "Item " + i});
    }
    return items;
  }
});

application.template.hbs

<h1>x-each</h1>

<ul>
  {{#x-each model as |item|}}
    <li>
      {{x-item item=item}}
    </li>
  {{/x-each}}
</ul>

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

li {
  border: 1px solid red; 
  min-height: 50px
} 

twiddle.json

{
  "version": "0.4.13",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.13/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember-template-compiler.js"
  }
}

x-each.component.js

import Ember from 'ember';

let XEachComponent = Ember.Component.extend({
  tagName: '',
  didReceiveAttrs() {
    let items = this.get('items') || [];
    let amount = this.getAttr('amount') || 10;
    this.set('xItems', items.slice(0, amount));
    Ember.run.next(this, 'set', 'xItems', items);
  }
});

XEachComponent.reopenClass({
  positionalParams: ['items']
});

export default XEachComponent;

x-each.template.hbs

{{#each xItems as |block|}}
  {{yield block}}
{{/each}}

x-item.template.hbs

{{item.name}}