Action delegation through several components

[Garun]

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?

[ef4]

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

@Garun

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?
  }
}

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