Data sharing in ember

Question

I'm trying to understand how to share data between my controllers/routes.

I have an application that's displaying data about companies. Here are the routes I want:

 /                summary info
 /companies       list of all companies with some more detail
 /companies/:id   details about a single company

Now, the data required for all three routes is contained in a single array of company data. So, I want that data to load when the app starts up, and then be used for each route. There are also additional methods I will need on the controller that should be shared.

It is clear that the second and third routes are nested, so I can share the data from the CompaniesController when I link to a specific company, by passing in that company's data:

{{#linkTo 'company' company}}{{ company.name }}{{/linkTo}}

But the summary route is where I'm getting stuck. The two options I've come up with:

1. Create the CompaniesController with any additional methods I need, and create the IndexController by extending it

   App.IndexController = App.CompaniesController.extend({});
   

   Then, as far as I can tell, both routes will need to find the models:

   App.Router.map(function() {
       this.resource('companies');
   });
   
   App.CompaniesRoute = Ember.Route.extend({
       model: function() {
           return App.Company.find();
       }
   });
   
   App.IndexRoute = Ember.Route.extend({
       model: function() {
           return App.Company.find();
       }
   });
   

   Seems like there should be a better way, since I'll have to repeat this for each new route I add (e.g. /revenue).

2. Nest the summary route within the companies resource, and give it a path of '/'. What I don't like about this is that the 'nesting' of my UI doesn't match the data. It also seems like I'll have to redefine the model property for each route.

Is there another option that's better?

tl;dr: How should I share data across controllers?

Answer 1

To share data beetwen controllers the correct way would be to use the needs API.

Assuming your CompaniesController has all the data that you want to make available to other controllers you should define it via needs, this can be a simple string, or an array of strings if you define more then one.

App.MyController = Ember.ObjectController.extend({
  needs: ['companies'],
  myFunction: function() {
    // now you can access your companies controller like this
    this.get('controllers.companies');
  }
});

To make things more easy accessible you could additionally define a binding, for example:

App.MyController = Ember.ObjectController.extend({
  needs: ['companies'],
  companiesBinding: 'controllers.companies',
  myFunction: function() {
    // now you can access your companies controller like this
    this.get('companies');
  }
});

Hope it helps.