Child Component Render

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  widgets: function(){
  	return this.get('store').peekAll('widget');
  }.property(),
  
  actions: {
    addWidget: function(){
      let newId = this.get('widgets').get('length')+1;
    	this.get('store').push({data: {id: newId, type: 'widget', attributes: {type:'Test Widget '+newId}}});
		}
  }
});

application.template.hbs

<h1>Data Store Additions Rerender Children</h1>
<br>
<p>Add a couple of widgets and watch the console. Notice that on every addition to the store all children are rerendered</p>
<br>
<button {{action 'addWidget'}}>Add</button>
{{widget-list}}

models.widget.js

import DS from 'ember-data';

export default DS.Model.extend({
  type: DS.attr('string')
});

twiddle.json

{
  "version": "0.4.16",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.1.0",
    "ember-data": "2.1.0",
    "ember-template-compiler": "2.1.0"
  }
}

widget-list.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  store: Ember.inject.service(),
  widgets: function(){
    Ember.Logger.debug('Peeking at some widgets');
    return this.get('store').peekAll('widget');
  }.property(),
  didRender: function(){
    Ember.Logger.debug('Rendering Widget List');
  }
});

widget-list.template.hbs

{{#each widgets as |widget|}}
	{{widget-view widget=widget}}
{{/each}}

widget-view.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  didRender: function(){
    Ember.Logger.debug('Rendering Widget:', this.get('widget.type'));
  } 
});

widget-view.template.hbs

{{widget.type}}