New Twiddle

components.array-container.js

import Ember from 'ember';

let { computed } = Ember;

export default Ember.Component.extend({
  count: 1,
  
  _items: computed('count', function () {
  	let result = [];
    for (let i = 0; i < this.get('count'); i++) {
    	result.push(Ember.Object.create({
      	index: i,
        hasIncrementButton: i === 0
      }));
    }
    return result;
  })
});

components.array-item.js

import Ember from 'ember';

let { computed: { equal }, run: { schedule } } = Ember;

const RENDERING = 'Rendering time';

export default Ember.Component.extend({
  item: null,
  
  _isZeroIndex: equal('item.index', 0),
  
  actions: {
    onIncrement: function () {
    	this.incrementProperty('item.index');
      
      console.time(RENDERING);
      schedule('afterRender', this, '_printRenderingTime');
    }
  },
  
  _printRenderingTime: function () {
  	console.timeEnd(RENDERING);  
  },
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

Click `Increment`, observe rendering time in console.<br> <br>
Set count on second `array-container` to 10000. Click `Increment` again, observe rendering time in console.
<br>
<br>
{{array-container count=1}}
<hr>
{{array-container count=1}}
<br>
<br>

templates.components.array-container.hbs

{{#each _items key='index' as |item|}}
	{{array-item item=item}}
{{/each}}

templates.components.array-item.hbs

Index: {{item.index}}
{{#if item.hasIncrementButton}}
  <button {{action 'onIncrement'}}>Increment</button>
{{/if}}

twiddle.json

{
  "version": "0.11.0",
  "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.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {}
}