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.

To get access to model from parent resource from nested route: http://stackoverflow.com/a/14688346/1662820 — xamenrax, Feb 04 '13 at 14:06
Dont you need params inside the function parameters? Just like you have it in the second one. `model: function(params) {` — Gustavo Hoirisch, Feb 04 '13 at 11:11
Oh yeah, I did like that, it's obvious, just pasted here the wrong edit. Anyway, the problem is still there. — xamenrax, Feb 04 '13 at 11:13

rossta · Accepted Answer · 2015-02-21T14:25:47.867

18

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

edited Feb 21 '15 at 14:25

answered Feb 06 '13 at 05:20

rossta

11,394
1
43
47

oh thanks, I've already made this workaround `setupController: function() { this.controllerFor('tour.seats').set('model', this.modelFor('tour')); }` , but your answer is "ember-way". – xamenrax Feb 06 '13 at 07:39

score 2 · Answer 2 · answered Feb 01 '13 at 12:08

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}}

answered Feb 01 '13 at 12:08

Wildhoney

4,969
33
38

You have `{{tour.seats}}` whereas in mine its `model`, which is special in EmberJS. When you pass in a model to the controller, it will always be `{{model.property}}`: `{{model.seats}}` – Wildhoney Feb 01 '13 at 15:45
Which is the same as saying: `{{controller.model.seats}}` – Wildhoney Feb 01 '13 at 15:46
`{{log controller.model.seats}}` gives undefind! What's wrong with it? – xamenrax Feb 04 '13 at 09:30

ianpetzer · Answer 3 · 2013-02-04T13:35:12.287

1

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?

edited Feb 04 '13 at 13:35

answered Feb 04 '13 at 11:57

ianpetzer

1,828
1
16
21

I need to wrap this to use it's outlets the way I need. The question is - how to access the parent's resource route's model from nested route? – xamenrax Feb 04 '13 at 12:13
I was under the impression that you if you are nesting resources you will need to supply an id for each nested resource... so with the structure you have described you will have a url that looks like: *tours/:tours_id/tour/:tour_id/seats*. Are the tours and tour resources different entities? – ianpetzer Feb 04 '13 at 12:25
No, it's the same entities, ArrayController and ObjectController. – xamenrax Feb 04 '13 at 12:42
I don't really understand what your're trying to achieve. Why do you want to nest the same resource type?... I have updated my answer to show the example urls that would be generated by my suggested resource mapping – ianpetzer Feb 04 '13 at 13:33
I need to get access to tour model, which is in parent route TourRoute, from nested route TourSeatsRoute. All simple. I already have url the same as in your updated answer - just look the question. I already have Tours ArrayController and Tour ObjectController, but seats is an attribute of Tour model, not standalone model itself. – xamenrax Feb 04 '13 at 13:36
Well.. My suggestion is to have one resource for posts with nested route for the seats. Sorry I can't help with your nested resource configuration – ianpetzer Feb 04 '13 at 13:46

Ember.js nested routes

3 Answers3