I'm trying to pass an action up from a child component with sendAction. My action executes on the parent component as expected, however, this refers to the context of the child's view object instead.
See below for the components and component templates:
Parent component Template
// templates/components/parent.hbs
<div class="parent">
{{child name="Stewie" select="selectChild"}}
{{child name="Molly" select="selectChild"}}
</div>
{{yield}}
Child component Template
// templates/components/child.hbs
<div class="child" {{action "handleAction" on="click"}}>
name: {{name}}
</div>
{{yield}}
Child component
// components/child.js
import Ember from 'ember';
export default Ember.Component.extend({
selected: false,
actions: {
handleAction: function() {
this.set('selected', !this.get('selected'));
this.sendAction('select', this);
}
}
});
Parent component
// components/parent.js
import Ember from 'ember';
export default Ember.Component.extend({
selectedChildren: [],
actions: {
selectChild: function(child) {
// oops! this is bound to the child's view isntead of this parent component
var selectedChildren = this.get('selectedChildren');
// undefined
selectedChildren.pushObject(child);
// oops! cannot call pushObject of undefined
}
}
});
Any suggestions?
Aucun commentaire:
Enregistrer un commentaire