2

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.

Sylvain Prat
  • 291
  • 3
  • 10

1 Answers1

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.

Johan Gorter
  • 1,253
  • 10
  • 13
  • Why don't you recommend using the DOM hierarchy? Because of performance issues? – Sylvain Prat Sep 20 '16 at 09:50
  • I would think that using the DOM hierarchy makes things needlessly complex. But I am curious if that is actually the case. Maybe you could make a jsfiddle or codepen to demonstrate how you would accomplish this? – Johan Gorter Sep 20 '16 at 14:32
  • I realize that I may also need an event to be triggered if the currently selected item is changed programmatically outside of the click event handler... So it can't just be a rendering-side-only event. I finally think your answer is the way to go. – Sylvain Prat Sep 20 '16 at 20:19