Emberjs using multiple paths / urls for one route

Question

In Ember, I can use this:

App.Router.map(function() { this.route('accomodations'); }); 

so if you go to / accomodations, it will load this view.

I can also add:

 App.Router.map(function() { this.route('accomodations', { path: '/travel' }); }); 

therefore, if you go to / travel, it will go into the same mode.

I want to be able to / stay and / travel go to one look? is it possible?

I know what is it:

 App.Router.map(function() { this.route('accomodations'); this.route('accomodations', { path: '/travel' }); }); 

Will do what I ask, but if they go to the rooms, this should show that in the URL it always shows the journey. I'm not even sure the last part of the code is best practice.

Answer 1

Using redirection

In router.js

 App.Router.map(function() { this.route('accomodations'); this.route('travel'); }); 

In routes/travel.js

 App.TravelRoute = Ember.Route.extend({ redirect: function() { this.transitionTo('accomodations'); }, }); 

You do not need to put them in separate files (exactly where I would put them).

What this means is register two routes with a router. Select one as the “primary” route and the other as the “nickname”. In this case, accomodation is the main route, and travel is its alias. When a user visits /travel , they are redirected to /accomodation .

This will be the Ember standard / standard way to achieve this, and if that is good for you, go for it.

Another possible solution

If you don’t want the redirect to happen for some reason, and you want the URL that the user sees to stay the same, but still display the same things and behave the same, this is also possible.

In this case, you will create two of each Ember element (route, controller, view, template). A sensible way would be to create a base class route, and both App.TravelRoute and App.AccomodationRoute trivially extend it; create a base class controller, and both App.TravelController and App.AccomodationController trivially extend it; the same for submissions, if you have them.

Templates, OTOH, are a bit more complicated because there is no way to extend them (which I know). So what you need to do is create a partial or component (which works best for you) and then reuse the partial / component in both templates/accomodation.hbs and templates/travel.hbs

Answer 2

You can simply swap two lines of the route definition:

 App.Router.map(function() { this.route('accomodations', { path: '/travel' }); this.route('accomodations'); }); 

The last definition takes precedence for displaying URLs in transitions {{link-to ...'accomodations'}} and Route#transitionTo('accomodations') in the application, although logging in to the / travel application will leave the URL as it is . (EmberJS 1.11.3, 2.12.2)