Call action from sibling component

1

Please, I need help here :cry:

I have a template

schedule (folder): index.hbs

Inside this template I have two components: {{filter}} {{events}} Basically, I need to call an action (chageMonth) from Events component. But the element who have the action call is inside Filter component. How can I do that?

And I don’t want to pass a data to validate the action. I think this is not performatic.

I’m trying so much things, but I don’t reach in a solution for that. Has anyone ever experienced this?

2

Use a parent component, that contains the data, and send the action up to the parent component

3

I think I don’t understand well. I will explain better with print screens. If you can help me, I appreciate this.

So I have a index.hbs template inside my Schedule folder:

739×342 22.2 KB

I have this addon calendar-events, inside the addon I have a component calendar-events.js and an action called changeMonth:

414×567 17.8 KB

So inside my calendar-filter.hbs (in the first picture) I’m put the action changeMonth:

741×463 35.2 KB

So I don’t know if this is correct and what I have to do to this works. I don’t know if understand well what you said. Basically I do that in my calendar-filter.js:

But doesn’t works. I really know I understand wrong :joy:

4

You can’t send actions between siblings. You have to send the action to a parent context instead. If you don’t want to use existing parent (controller or component), you can make a new one

5

Oh, ok. I get it. So I send my changeMonth action to controller?

How can I do that?

Create a controller for my index.hbs?

I can’t understand (pro grammatically) how this will be.

Sorry for the biggest question. And thank’s for your time.

6

The simplest answer would be to create schedule/controller.js and place the changeMonth action there. Then when you call your components in schedule/index.hbs do so like this:

{{component-tags changeMonth=(action 'changeMonth') ...}} ... {{calendar-events changeMonth=(action 'changeMonth') ...}}

and have the same sendAction block in both of the child components. That way, you’ll be able to call that action from the separate components, if that is what you need.

1 Like