Question

我有两个资源都具有相同的子资源：

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

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

问题在于，ember路由器只根据当前和父路由构建路由对象的名称，而不是整个层次结构。因此，它会尝试将/posts/:id/comments/new和/products/:id/comments/new路由到App.NewCommentRoute对象。我该怎么做才能解决这个问题？

这篇文章改编自GitHub issue。

Answer 1

我将James A. Rosen的解决方案更进了一步，它就像一个魅力。有点多余，但让事情更加直观：

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

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

现在，您可以像原先预期的那样使用transitionTo('product.comments.new')或App.register('route:product.comments.new', myRouteHandler)。

如果您没有手动注册路由处理程序，Ember会优雅地在App.ProductCommentsNewRoute

中查找它

唯一的缺点是使用与父资源已有的相同的根名称来定义子资源名称的冗余。

Answer 2

指定路径时，路径默认为路径名称，但您可以覆盖该行为。您可以通过向名称添加更多信息来消除深层嵌套路由的歧义。有两种方法可以实现基本相同的结果：

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

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

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

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

在这两种情况下，路由器现在都会查找App.NewPostCommentsPath和App.NewProductCommentsPath。第一个优点是第二个优点是，如果你想在外部引用路由，它们看起来像“postComments.new”而不是“comments.newPost”。前者对我说得更好。

Answer 3

两年过去了，Ember已经有了很大的进步。

自Ember 1.7起，路由也可以有子路由：http://emberjs.com/blog/2014/08/23/ember-1-7-0-released.html#toc_new-features。

所以我们可以将其重写为：

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

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

如何消除ember.js中嵌套路由的歧义？

3 个答案: