lotsa-divs

components.my-a.js

import Ember from 'ember';

export default Ember.Component.extend({
  times: [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10
  ]
});

components.my-b.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  bleh: [
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  ]
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{#each-in this.bleh as |key value|}}
	<DemoComponent @n={{key}} />
{{/each-in}}

templates.components.demo-component.hbs

{{my-a}}

<div>{{@n}} - 1</div>
<div>{{@n}} - 2</div>
<div>{{@n}} - 3</div>
<div>{{@n}} - 4</div>
<div>{{@n}} - 5</div>
<div>{{@n}} - 6</div>
<div>{{@n}} - 7</div>
<div>{{@n}} - 8</div>
<div>{{@n}} - 9</div>
<div>{{@n}} - 10</div>
<div>{{@n}} - 11</div>
<div>{{@n}} - 12</div>
<div>{{@n}} - 13</div>
<div>{{@n}} - 14</div>
<div>{{@n}} - 15</div>
<div>{{@n}} - 16</div>
<div>{{@n}} - 17</div>
<div>{{@n}} - 18</div>
<div>{{@n}} - 19</div>
<div>{{@n}} - 20</div>
<div>{{@n}} - 21</div>
<div>{{@n}} - 22</div>
<div>{{@n}} - 23</div>
<div>{{@n}} - 24</div>
<div>{{@n}} - 25</div>
<div>{{@n}} - 26</div>
<div>{{@n}} - 27</div>
<div>{{@n}} - 28</div>
<div>{{@n}} - 29</div>
<div>{{@n}} - 30</div>
<div>{{@n}} - 31</div>
<div>{{@n}} - 32</div>
<div>{{@n}} - 33</div>
<div>{{@n}} - 34</div>
<div>{{@n}} - 35</div>
<div>{{@n}} - 36</div>
<div>{{@n}} - 37</div>
<div>{{@n}} - 38</div>
<div>{{@n}} - 39</div>
<div>{{@n}} - 40</div>
<div>{{@n}} - 41</div>
<div>{{@n}} - 42</div>
<div>{{@n}} - 43</div>
<div>{{@n}} - 44</div>
<div>{{@n}} - 45</div>
<div>{{@n}} - 46</div>
<div>{{@n}} - 47</div>
<div>{{@n}} - 48</div>
<div>{{@n}} - 49</div>
<div>{{@n}} - 50</div>

templates.components.my-a.hbs

<div>a ----- a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a ----- end</div>

{{#each times as |t|}}
	{{my-b t=t}}
{{/each}}

templates.components.my-b.hbs

<div>b ----- b</div>
<div>b</div>
<div>b</div>
<div>b</div>
<div>b</div>
<div>b</div>
<div>b</div>
<div>b</div>
<div>b</div>
<div>b</div>
<div>b</div>
<div>b</div>
<div>b</div>
<div>b</div>
<div>b</div>
<div>b</div>
<div>b ----- end</div>

twiddle.json

{
  "version": "0.15.1",
  "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.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}