Emberjs Application Routes and Controllers

Question

Can someone explain why this works:

Code in App.js:

App.ApplicationRoute = Ember.Route.extend({
  setupController : function (params) {
    this.controllerFor('food').set('model', App.Food.find(params.food_id));
  }
});

But the following won't, unless I explicitly declare App.FoodController = Ember.ObjectController.extend();

App.FoodRoute = Ember.Route.extend({
  model : function(params) {
    return App.Food.find(params.food_id);
  }
});

This is the code I'm using in index.html and does not change between blocks of code

<script type="text/x-handlebars" data-template-name="application">     
  {{ outlet }}
</script>     

<script type="text/x-handlebars" data-template-name="food">
  {{name}}
</script>

Router:

App.Router.map(function() {
  this.resource( 'foods' );
  this.resource( 'food', { path : '/food/:food_id' } );  
});

Please provide more code. It would be nice to see your routes definition. — Georgi Atsev

Georgi Atsev Georgi Atsev · Accepted Answer · 2013-02-06T07:14:42

The code that you have shown seems OK. Here is a working fiddle that proves it: http://jsfiddle.net/ebXeS/2/

The only thing wrong about the code is this part (which is excluded from the fiddle):

App.ApplicationRoute = Ember.Route.extend({
  setupController : function (params) {
    this.controllerFor('food').set('model', App.Food.find(params.food_id));
  }
});

According to your Router definition, you should not have food_id in the parameters of your application route. More than that, you should access the controller for the food route in the uhm... FoodRoute. Read more about Ember and the way it does routing (http://emberjs.com/guides/).

Emberjs Application Routes and Controllers

1 Answers