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");
  }
});