Multiple dynamic segments in one resource in Ember.js

Is there a way to have multiple dynamic segments with one resource? My use case is to prevent the user from clicking directions.

Example:

this.resource('tracks', { path: 'albums/:album_id/tracks/:tracks_id' }); 

And I would like for the user not to hit the following routes:

 albums/:album_id albums/:album_id/tracks albums/:album_id/tracks/:track_id 

Routes

 this.resource('albums', { path: 'albums' }, function(){ this.resource('album', { path: '/:album_id' }, function() { this.resource('tracks', { path: 'tracks' }, function(){ this.resource('track', { path: '/:track_id' }); }); }); }); 

Any help would be greatly appreciated.

Defining your routes

NOTE. If you define a resource using this.resource and do not provide, then the implicit path resource.index is not created.

+6
source share
3 answers

It is better to use the Ember nested routes. Each route has its own dynamic segment.

 App.Router.map(function () { this.resource('albums', { path: '/albums' }, function () { this.resource('album', { path: ':album_id' }, function () { this.resource('tracks', { path: 'tracks' }, function () { this.resource('track', { path: ':track_id' }); }); }); }); }); 

If you want to show the user the first track immediately after clicking on the album, you can use the redirection.

 App.AlbumRoute = Ember.Route.extend({ afterModel: function (album, transition) { this.transitionTo('track', {album_id: album.id, track_id: album.tracks[0].id}); }, }); 

Check redirected documents: http://emberjs.com/guides/routing/redirection/

+3
source

Just for completeness, pointer routes are not needed, they are just convenient for freebies, if you define them, if you do not define them, they won’t go for them.

http://emberjs.jsbin.com/eMofowUQ/1/edit

And you can identify several slugs in one path and go directly to it, just note that you will only have one model for this single resource, so you have to deal with this.

http://emberjs.jsbin.com/eMofowUQ/2/edit

+2
source

A possible solution for us was the following:

 App.AlbumsIndexRoute = Ember.Route.extend({ redirect: function(){ this.transitionTo('dashboard'); } }); 
0
source

Source: https://habr.com/ru/post/959422/


All Articles