Ember.js nested routes

Question

Cheers! I've got routes:

TravelClient.Router.map(function() {
  this.resource('tours', function() {
    this.resource('tour', { path: ':tour_id' }, function(){
      this.route('seats');
    });   
  });
});

And a template:

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

Seats is an attribute of Tour object:

TravelClient.Tour.find(1).get('seats');
12

And I extend my TourSeats route like this:

TravelClient.TourSeatsRoute = Ember.Route.extend({
  model: function(params) {
    return TravelClient.Tour.find(params.tour_id).get('seats');
  }
});

Question: how to render tour's seats in template?

UPDATE:

My fixtures looks like that:

TravelClient.Store = DS.Store.extend({
  revision: 11,
  adapter: 'DS.FixtureAdapter'
});

TravelClient.Tour = DS.Model.extend({
  title: DS.attr('string'),
  description: DS.attr('string'),
  seats: DS.attr('number')
});

TravelClient.Tour.FIXTURES = [{
  id: 1,
  title: "Brighton, England",
  description: "Lorem ipsum dolor ... .",
  seats: 12
},...

And I've changed my route extend to this:

TravelClient.TourSeatsRoute = Ember.Route.extend({
  model: function(params) {
    return TravelClient.Tour.find(params.tour_id);
  }
});

And in template:

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

UPDATE 2:

  <script type="text/x-handlebars" data-template-name="tour/seats">
    {{controller.model.seats}}
  </script>

and it gives undefind back. After some debugging I founded out, that there is no any id in params and params is empty, thats why I can't get the right model in TourSeatsRoute function.

Answer 1

If you're using ember-1.0-pre.4+, the params are only returned for the specific route you're on, not the whole URL. There's some discussion about this here .

I believe the desired approach at this time is to use this.modelFor passing the name of the parent resource you've set up in the parent route. So in your case, it would be:

TravelClient.TourSeatsRoute = Ember.Route.extend({
  model: function() {
    return this.modelFor("tour");
  }
});

Answer 2

You just need to return the model from the model method:

TravelClient.TourSeatsRoute = Ember.Route.extend({
  model: function(params) {
    return TravelClient.Tour.find(params.tour_id);
  }
});

And then in your template you can do the following where controller is the context:

{{model.seats}}

Answer 3

I'm still new to EmberJS but I would've written my router and routes like this.

I'm not sure that you need to wrap the post resource inside the posts resource. Note the double plurals in ToursSeatsRoute

TravelClient.Router.map(function() {
  this.resource('tours', function() {        
    this.route('/:tour_id/seats');        
  });
});

This would give you the following urls:

/tours - you could map this to an ArrayController

/tours/:tour_id/seats - you could map this to an ObjectController

TravelClient.ToursSeatsRoute = Ember.Route.extend({
  model: function(params) {
    console.log(params); 
    return TravelClient.Tour.find(params.tour_id);
  }
});

Give it a go? Or maybe put your code a in a JSFiddle?