parent-child-communication

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend();

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    var array = ['red', 'blue', 'green'];
    return array.map(function(color) {
      return Ember.Object.create({ color: color })
    });
  }
});

application.template.hbs

<h1>Parent-child communication</h1>
{{parent-item items=model }}

child-item.component.js

import Ember from 'ember';

export default Ember.Component.extend();

child-item.template.hbs

<li style="{{if height ' height: 100px;'}}">{{item.color}}</li>

parent-item.component.js

import Ember from 'ember';

export default Ember.Component.extend({

  childWrappers: Ember.computed('items.@each', function() {
    return this.get('items').map(item => {
      return Ember.Object.create({ // wrapper object
        item: item,
        height: true
      });
    });
  }),

  actions: {
    click() {
      this.get('childWrappers').forEach(wrapper => {
        wrapper.toggleProperty('height');
      });
    }
  }
});

parent-item.template.hbs

<button {{action "click"}}>toggle item height</button>
<ul>
  {{#each childWrappers as |wrapper|}}
    {{ child-item item=wrapper.item height=wrapper.height }}
  {{/each}}
</ul>

styles.app.css

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

.height {
  height: 100px;
}

twiddle.json

{
  "version": "0.4.11",
  "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.9/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.11/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember-template-compiler.js"
  }
}