Ember route communication with unrelated component

Question

I know EmberJS promotes "data down, actions up", but I have a scenario that I'm not sure how to fit into that paradigm. It's best if I explain by an example that's analogous to what I'm trying to achieve.

Let's say I have a fixed header component ('fixed-header'). I want this header to appear always, so of course I add it to my main application template:

{{fixed-header}}
{{outlet}}

Now let's say I want my header to display some information about the route I'm on. For simplicity's sake, let's say each route has a title I want displayed in the fixed header. So whether I'm on /foo or /foo/bar/baz or /wackawacka/meh?cat=meow, I want that route to be able to send some data to fixed-header component to display. In other words, I kinda want to go against "data down" and do a "data up".

What is the ideal way to approach this? My first instinct was to create a service that my-header listens to and routes can post their information to. But is that the right thing to do? It seems weird to me to create a service just to send a little bit of text. Is there another way?

Answer 1

You could use a parameter for your component.

{{fixed-header info=headerInfo}}
{{outlet}}

And then in any route in some hook

setupController: function(controller, model) {
  this._super(controller, model);
  var headerInfo = ...
  this.controllerFor('application').set('headerInfo', headerInfo);
}

Answer 2

Service is the way to go. refer Service Ember Guide

An Ember.Service is an Ember object that lives for the duration of the application, and can be made available in different parts of your application. Services are useful for features that require shared state or persistent connections.