CODEWITHSUNDEEP
ember.js
ken
ken

Reputation: 8993

Sending an action to containing component

If I have two components:

and nav-menu is a block component that would contain nav-button like so:

{{#nav-menu}}
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    {{nav-button}}
{{/nav-menu}}

I'd like the button to be able to directly send an action to the menu to tell it to toggle it's visibility state. I guess if I hook into a mutux point in Controller then I could do something like:

{{#nav-menu toggleNavigation=mutex}}
    {{nav-button action=mutex}}
{{/nav-menu}}

Is this the only way? Just looking for the most graceful, ember-centric way of doing this.

Upvotes: 0

Views: 70

Answers (1)

GJK
GJK

Reputation: 37369

I've run into this issue before and unfortunately, there's no way in the public API to do this. When creating a block component, anything rendered inside of it has the context of the outer scope, not the component. It's unfortunate that there's no way to change this behavior, but it really does make sense.

I would say that the way you've proposed is the best way to handle this situation: have a variable on the controller that's passed to the outer component. It's inline with Ember's "data down, actions up" philosophy.

Upvotes: 1

Related Questions