javascript - How do I disambiguate nested routes in ember.js? - Stack Overflow

admin管理员组

文章数量:1403461

I have two resources that both have the same sub-resource:

App.Router.map(function() {
  this.resource('post', function() {
    this.resource('ments', function() {
      this.route('new');
    });
  });

  this.resource('product', function() {
    this.resource('ments', function() {
      this.route('new');
    });
  });
});

The problem is that the ember router builds the names of the route objects out of just the current and parent routes, not out of the whole hierarchy. Thus, it tries to route both /posts/:id/ments/new and /products/:id/ments/new to the App.NewCommentRoute object. What can I do to fix this?

This post was adapted from a GitHub issue.

I have two resources that both have the same sub-resource:

App.Router.map(function() {
  this.resource('post', function() {
    this.resource('ments', function() {
      this.route('new');
    });
  });

  this.resource('product', function() {
    this.resource('ments', function() {
      this.route('new');
    });
  });
});

The problem is that the ember router builds the names of the route objects out of just the current and parent routes, not out of the whole hierarchy. Thus, it tries to route both /posts/:id/ments/new and /products/:id/ments/new to the App.NewCommentRoute object. What can I do to fix this?

This post was adapted from a GitHub issue.

• javascript
• ember.js
• ember-router

Share Improve this question Follow asked Feb 17, 2013 at 17:36 James A. RosenJames A. Rosen 65.3k6262 gold badges184184 silver badges263263 bronze badges 3

• This was originally my question: github./emberjs/ember.js/issues/2086 Feels a little like my rep is being poached. – KOGI Commented Feb 17, 2013 at 19:44
• Sorry about that. I didn't see it. I'll mark my answer as munity wiki. (Questions can't be, though I did link to your GitHub issue in the question text.) – James A. Rosen Commented Feb 17, 2013 at 20:19
• Thanks. Your answer is all yours, though, so you should be getting all the rep for it. Only the original question was mine. – KOGI Commented Feb 17, 2013 at 20:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I took James A. Rosen's solution one step further and it worked like a charm. A bit redundant, but makes things much more intuitive down the road:

App.Router.map(function() {
  this.resource('post', function() {
    this.resource('post.ments', { path: '/ments' }, function() {
      this.route('new');
    });
  });

  this.resource('product', function() {
    this.resource('product.ments', { path: '/ments' }, function() {
      this.route('new');
    });
  });
});

This now allows you to use transitionTo('product.ments.new') or App.register('route:product.ments.new', myRouteHandler) just as originally expected.

If you don't manually register your route handler, Ember, gracefully, will even look for it in App.ProductCommentsNewRoute

The only downside is the redundancy of defining the name of the sub-resource with the same root name that the parent resource already has.

When you specify a route, the path defaults to the name of the route, but you can override that behavior. You can disambiguate deeply-nested routes by adding more information to the name. There are two ways to achieve essentially the same oute:

App.Router.map(function() {
  this.resource('post', function() {
    this.resource('postComments', { path: '/ments' }, function() {
      this.route('new');
    });
  });

  this.resource('product', function() {
    this.resource('productComments', { path: '/ments' }, function() {
      this.route('new');
    });
  });
});

App.Router.map(function() {
  this.resource('post', function() {
    this.resource('ments', function() {
      this.route('newPost', { path: '/new' });
    });
  });

  this.resource('product', function() {
    this.resource('ments', function() {
      this.route('newPost', { path: '/new' });
    });
  });
});

In both cases, the router will now look for App.NewPostCommentsPath and App.NewProductCommentsPath. The advantage of the first over the second is that if you want to refer to the routes externally, they look like "postComments.new" instead of "ments.newPost". The former reads better to me.

As two years has passed, Ember has improved a lot.

Since Ember 1.7, routes can also has subroutes: http://emberjs./blog/2014/08/23/ember-1-7-0-released.html#toc_new-features.

So we can rewrite this as:

this.route('post', function() {
    this.route('ments', { path: '/ments' }, function() {
        this.route('new');
    });
});

this.route('product', function() {
    this.route('ments', { path: '/ments' }, function() {
        this.route('new');
    });
});

本文标签： javascriptHow do I disambiguate nested routes in emberjsStack Overflow