在Ember中不在父模板中呈现子模板的正确且干净的方法

Question

我正在检修一个旧项目，使用带有firebase的ember来保存数据。这是一个餐厅网站，我添加了身份验证，我允许管理员用户添加和删除餐厅菜单中的菜单项。

我的路线设置如下

Router.map(function() {
  this.route('menu', function() {
    this.route('add');
  });
});

模型函数正常工作，但由于添加菜单项时的嵌套路径，菜单模板会增长并增长，并在折叠下方推动添加形式。我的问题是获取它的正确方法是什么，以便当您在localhost / menu / add上时localhost / menu不会呈现？

Answer 1

第一个选项

所以似乎menu和menu.add路线没有多大关系。 第一个建议是将它们分开，因为它们是不相关的路线：

  this.route('add-menu');
  this.route('show-menu');

第二个选项

但是如果它们有点相关，那么最好的建议是创建一个列出菜单项的新路径。如：

this.route('menu', function() {
  this.route('add');
  this.route('list');
});

通过这种方式，menu路由模板将为空。 （在menu路线中，您可能需要添加redirect挂钩以将menu路线重定向至menu.list。）

第三个选项

但我认为更好的建议是使用index路线。不要定义上面的list路线，而是使用index路线。索引路径将列出菜单项。

看看this twiddle。

来自Ember Guides的

Index Routes。