Action delegation through several components


#1

Hi there! I am rather new to Ember and yet to understand all of the minute thighs that are happening in Ember.

I have a components that has an action that creates an object.
export default Ember.Controller.extend({
actions: {
addFilter({…}) {
this.get(‘store’).createRecord(‘selectedFilters’, {…});
}
}
});
I summon from corresponding .hps template a components with this action:
{{sidebar-main addFilter=(action “addFilter”)}} //I could have used different names here…
And the summon another component in this components with this action:
{{some-filter addFilter=addFilter}}
And then in the lowest component, .hbs:
<button onclick={{action “bubbleAddFilter”}}>Button
.js:
actions: {
bubbleAddFilter() {
this.addFilter({…}); //is this the correct way?
}
Everything works, but I am not sure that I handle Actions the correct way on the lower levels and also the thing is that writing like {{some-filter addFilter=this.addFilter}} or {{some-filter addFilter=this.addFilter}} produces the same result which confuses me. Can anyone please elaborate on this topic?


#2

Reposting your code with formatting so I can see it better:

Yes, this looks fine. If the value of the filter you’re trying to add is already available from your template, you can probably skip making bubbleAddfilter and just do:

<button onclick={{action addFilter theNewFilter}}>Button