Search code examples
javascriptember.jsember-old-router

Ember.js Router App Architecture — How to correctly communicate between loosely coupled components


Architecturally speaking, a controller does not know about view (usually) and it certainly doesn't know about some other controllers view. Controllers don't know about other controllers either. Sometimes it is necessary for these loosely coupled components to be able to communicate, but best practice is not to tightly couple them together. Is there a messaging framework plugin that allows different components to emit and receive global messages within the app? Is there a better way to handle these kinds of communications?


Solution

  • It wouldn't be too hard to create a pub/sub hub using something like jQuery.Callbacks. However, that is not part of a typical Ember.js app.

    When something happens that needs to be communicated beyond the scope of the responsible controller, the pattern is to send the action up to the router, where the current state can handle it. The router/stateManager is the coordinator of the app, and can respond to the action by sending messages to other controllers and/or models, and/or by transitioning to another state.

    I tried to diagram this in a talk I gave recently: http://www.lukemelia.com/devblog/archives/2012/08/23/architecting-ember-js-apps/