My question is about the communication between components in the Maquette Javascript framework.
Imagine I have a Menu
sub-component used in an Application
component: the Application
instance would like to know when a menu item is selected in the Menu
instance in order to swap the main content displayed in the application (for example). In other words, I need a way to communicate between a child component and its parent component. How can this be achieved in Maquette?
Sure, I can pass a callback owned by the application instance to the menu instance, which will be called when an item is selected. But I'm a bit reluctant to do that because the "selection" event is just a "rendering-side" aspect of the menu component, so I would prefer the event not to leak into my Menu
API, but to stay inside the render function/method instead.
So, I would like to deal with events at the "rendering-side". But I guess it means I have to send a CustomEvent
from the Menu
's render function and register a CustomEvent
handler inside the Application
's render function, right? Is this use-case supported in maquette? Are there other alternatives to CustomEvent
for my use-case?
Thanks!
PS: question reposted here from ticket #71 in order to get more answers.
What we usually do is pass callbacks to components that get invoked when items get clicked. A Menu could be constructed with a callback
menuItemClicked(menuItem: MenuItem)
for example. Imho this does not leak any application-specific knowledge into the menu/menuitem. The creator of the menu could do anything inside the callback like routing or changing a variable.An event system is also certainly possible. I do not recommend using the DOM hierarchy to bubble the events though. I can imagine the
Application
creating the menu usingmenu = createMenu(...)
and afterwards callingmenu.addEventListener('itemClicked', navigate)
or something.