Geek Answers Handbook

Nested routes Ember.js

Hooray! I have routes:

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

And the template:

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

Seats are an attribute of the Tour object:

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

And I am expanding the TourSeats route as follows:

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

Question: how to display tourist places in the template?

UPDATE:

My lights look like this:

 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 changed my route to this:

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

And in the 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 returns undefind. After some debugging that I founded, there is no id in params and params is empty, which is why I can’t get the model I need in the TourSeatsRoute function.

+7
source share
3 answers

If you use ember-1.0-pre.4 +, the parameters are returned only for the route you have defined, and not for the entire URL. There is a discussion of this issue .

I believe that the desired approach for now is to use this.modelFor pass the name of the parent resource that you configured in the parent route. Therefore, in your case it will be:

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

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}}
+2
source

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

I'm not sure if you need to wrap a message resource in a message resource. Pay attention to double plurals in TourSeatsRoute

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

This will give you the following URLs:

/ tours - you can match it with ArrayController

/ tours /: tour_id / seat - you can map this to an ObjectController

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

Set off Or maybe enter the code in JSFiddle?

+1
source

More articles:


All Articles