Communication between components in Maquette

Question

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.

Answer 1

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 using menu = createMenu(...) and afterwards calling menu.addEventListener('itemClicked', navigate) or something.