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

Question

我正在彻底改造一个旧项目以使用 ember 和 firebase 来持久化数据。这是一个餐厅网站，我添加了身份验证，我允许管理员用户从餐厅的菜单中添加和删除菜单项。

我的路线设置如下

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

模型功能正常工作，但由于添加菜单项时的嵌套路由，菜单模板不断增长，并将添加表单推到折叠下方。我的问题是获取它的正确方法是什么，以便 localhost/menu 在 localhost/menu/add 时不呈现？

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 路由。索引路由将列出菜单项。

Index Routes 来自 Ember 指南。

The correct and clean way to not render a child template in a parent template in Ember