javascriptember.jsember-dataember-cliember.js-2

Ember.js 2. Nested routes but non-nested templates


First of all, thank you all for your efforts in this forum.

I have this situation:

I need an url like this:

mysite.com/author/1/1/cart

but I don't want nested template (every page is different and I don't want same info in many page).

Is there a way to have that URL?

My actual router.js is this:

Router.map(function() {
  this.route('index', {path: '/'});
  this.route('login');
  this.route('authors', {path: '/authors'});
  this.route('author', {path: '/author/:author_id'});
  this.route('book', {path: '/book/:book_id'});
  this.route('cart', {path: '/cart/:cart_id'});
});

Solution

  • You have two options:

    Multiple dynamic segments

    Just don't nest your routes but have multiple dynamic segments. Thats possible:

    this.route('cart', {path: '/cart/:author_id/:cart_id'});
    

    This will give you a route like this:

    /cart/1/A this will render the cart route with the author 1 and the cart A

    Nest but just don't put anything into the parent route

    So you can have this router:

    this.route('author', {path: '/author/:author_id'}, function() {
      this.route('cart', {path: '/cart/:cart_id'});
    });
    

    Now your problem is that if you put the author data into the /author route its also visible on the author.cart route. But a simple solution is to keep the author route empty, with just {{outlet}} as the template and put your author stuff into the author.index route.

    This will give you routes like this:

    /author/1 this will render the author.index route with the author 1

    /author/1/cart/A this will render the author.cart route with the author 1 and the cart A