EmberJS nested component events

Question

I am using EmberJS CLI and I am trying to wrap my head around components. However I don't quite understand what the best way is to communicate between them. I am trying to make a simple graphics editor with a side menu and a canvas. I have a "graphics-editor" component which contains the "side-menu" and "editor-canvas" components as children. If I choose an option such as "insert text" on the "side-menu" component, how do I tell the "editor-canvas" to add some text?

I have heard of actions up, data down. So should I pass the side menu model to the canvas to observe (I may also have a menu bar which can tell the canvas to do stuff later on too, so I would also have to observe that somehow)? So whenever an action on the side menu occurs, its model is updated and the canvas can observe this and act on changes to it?

Or is there a clean way to bubble the side menu action up to the parent editor component and then catch it and call an action on the canvas component?

Or should I be using views and controllers (even though EmberJS seem to be steering people away from them) instead of components. Then the controller of graphics-editor can catch an action and pass it onto editor-canvas using controllerFor?

Or should I be using Ember.Evented?

In my main application template I have:

{{graphics-editor model=model}}

My graphics editor (graphics-editor.hbs) component looks like:

<div class="ui-layout-north nopadding">
  {{file-menu menuItems=model.fileMenu.menuItems}}
</div>
<div class="ui-layout-west">
  {{side-menu addLabel='addLabel'}}
</div>
<div class="ui-layout-center nopadding emptyBackground">
  {{editor-canvas canvasModel=model.canvas}}
</div>
<div class="ui-layout-south nopadding">
  {{editor-footer}}
</div>

Frank Treacy Frank Treacy · Accepted Answer · 2015-08-03T00:13:27

Keep the components. In this case of sibling components messaging each other quite a lot (side menu and canvas), I think it warrants using Ember.Evented.

You could have a event bus service (Ember.Service.extend(Ember.Evented)) injected in your components for a pub/sub mechanism. For instance in your side menu component:

eventBus: Ember.inject.service(),

actions: {
    insertText: function(text) {
      this.get('eventBus').trigger('insertText', text);
    }
    ...
}

to which the canvas component would be subscribed.

I recently wrote about this subject: http://emberigniter.com/parent-to-children-component-communication/

EmberJS nested component events

1 Answers