ember.js Component - communication between child to parent component. Composable Components
Example
Inside parent-component.hbs
{{yield (hash
child=(
component 'child-component'
onaction=(action 'parentAction')
)
)}}
Inside parent-component.js
export default Ember.Component.extend({
actions: {
// We pass this action to the child to call at it's discretion
parentAction(childData) {
alert('Data from child-component: ' + childData);
}
}
});
Inside child-component.js
export default Ember.Component.extend({
// On click we call the action passed down to us from the parent
click() {
let data = this.get('data');
this.get('onaction')(data);
}
});
Inside usage.hbs
{{#parent-component as |ui|}}
{{#each model as |item|}}
{{ui.child data=item}}
{{/each}}
{{/parent-component}}
