ember.js - `needs` not waiting for data to be returned before rendering template

Question

I am trying to implement a controller needing another (CampaignsNew needing AppsIndex), which looks like

App.CampaignsNewController = Ember.Controller.extend({
   needs: ['appsIndex']
});

And in my CampaignsNew template I am showing it via

{{#if controllers.appsIndex.content.isUpdating}}
  {{view App.SpinnerView}}
{{else}}
  {{#each controllers.appsIndex.content}}
    {{name}}
  {{/each}}
{{/if}}

However controllers.appsIndex.content.isUpdating is never true. I.e. it attempts to show the data before it has been loaded.

My AppsIndex route has the model overridden:

App.AppsIndexRoute = Ember.Route.extend({
  model: function(controller) {
    var store = this.get('store').findAll('app');
  }
  ...
});

I can get it to work if I put the same code within my CampaignsNew route and modify the template to each through controller.content. Which says to me that needs is not using the route? It also works if I go to the /apps page and it loads the data, and then navigate to the /campaigns/new page.

How do I get this to work? Thanks!

Edit: As requested, the relevant parts of my router:

App.Router.map(function() {
  this.resource('apps', function() {
    ...
  });

  this.resource('campaigns', function() {
    this.route('new');
  });
});

And the AppsIndex is accessed at /apps and CampaignsNew is at /campaigns/new

Edit2: After implementing the suggestion by @kingpin2k, I've found that Ember is throwing an error. Below are the updated files and the error received.

App.CampaignsNewController = Ember.ObjectController.extend({
  pageTitle: 'New Campaign'
});

App.CampaignsNewRoute = Ember.Route.extend({
  model: function(controller) {
    return Ember.RSVP.hash({
      campaign: this.store.createRecord('campaign'),
      apps: this.store.find('app')
    });
    // return this.store.createRecord('campaign');
  },

  setupController: function(controller, model){
    controller.set('apps', model.apps);
    this._super(controller, model.campaign);
  }
});

Ember throws this error:

Error while loading route: Error: Assertion Failed: Cannot delegate set('apps', <DS.RecordArray:ember689>) to the 'content' property of object proxy <App.CampaignsNewController:ember756>: its 'content' is undefined.

I read online that this is because the content object doesn't exist. If I set it like so:

App.CampaignsNewController = Ember.ObjectController.extend({
  content: Ember.Object.create(),
  ...
});

Then the page loads without error, and when inspecting the Ember Chrome extension, I can see the data has loaded. But it doesn't show on the page. Which I suppose happened because the content object existed and so Ember didn't wait for the model's promise to fulfill before rendering the template. Seems odd that you should have to define content in such a way though. Any insight on how to handle this?

Edit3: Question answered for me in another thread

Answer 1

Based on your router, apps isn't a parent of campaigns/new.

This means someone could hit #/campaigns/new and Ember would hit ApplicationRoute, CampaignsRoute, and CampaignsNewRoute to populate the necessary information for the url requested. Using needs as a way of communicating between controllers really only makes sense in an ancestral pattern (aka communicating with your parents, grandparents etc).

Just as another quick note, AppsIndex is a route of Apps, it won't be hit when your url includes a child. e.g.

Router

this.resource('apps', function() {
  this.resource('chocolate', function(){
     .....
  });
});

Url being hit

#/apps/chocolate

Routes that will be hit

ApplicationRoute
AppsRoute
ChocolateRoute
ChocolateIndexRoute

The index route is only hit when you don't specify a route of a resource, and you are hitting that exact resource (aka nothing past that resource).

Update

You can return multiple models from a particular hook:

App.FooRoute = Em.Route.extend({
  model: function(){  
    return Em.RSVP.hash({
      cows: this.store.find('cows'),
      dogs: this.store.find('dogs')
    });
  }
});

If you want the main model to still be cows, you could switch this up at the setupController level.

App.FooRoute = Em.Route.extend({
  model: function(){  
    return Em.RSVP.hash({
      cows: this.store.find('cows'),
      dogs: this.store.find('dogs')
    });
  },
  setupController: function(controller, model){
    controller.set('dogs', model.dogs);  // there is a property on the controller called dogs with the dogs
    this._super(controller, model.cows);  // the model backing the controller is cows
  }
});

Check out the second answer here, EmberJS: How to load multiple models on the same route? (the first is correct as well, just doesn't mention the gotchas of returning multiple models from the model hook).

You can also just set the property during the setupController, though this means it won't be available when the page has loaded, but asynchronously later.

Which controller?

Use Controller if you aren't going to back your controller with a model.

App.FooRoute = Em.Route.extend({
  model: function(){
    return undefined;
  }
});

Use ObjectController, if you are going to set the model of the controller as something, that isn't a collection.

App.FooRoute = Em.Route.extend({
  model: function(){  
    return Em.RSVP.hash({
      cows: this.store.find('cows'),
      dogs: this.store.find('dogs')
    });
  }
});

Use ArrayController if that something is going to be a collection of some sort.

App.FooRoute = Em.Route.extend({
  model: function(){  
    return ['asdf','fdsasfd'];
  }
});

Note

If you override the setupController, it won't set the model of the controller unless you explicitly tell it to, or use this._super.

App.FooRoute = Em.Route.extend({
  model: function(){  
    return Em.RSVP.hash({
      cows: this.store.find('cows'),
      dogs: this.store.find('dogs')
    });
  },
  setupController: function(controller, model){
    controller.set('cows', model.cows);
    controller.set('dogs', model.dogs);
    // uh oh, model isn't set on the controller, it should just be Controller
    // or you should define one of them as the model
    // controller.set('model', model.cows); or
    // this._super(controller, model.cows); this does the default setupController method
    // in this particular case, ArrayController
  }
});