在 Ember 的父模板中不渲染子模板的正确和干净的方法

【问题标题】：The correct and clean way to not render a child template in a parent template in Ember在 Ember 的父模板中不渲染子模板的正确和干净的方法
【发布时间】：2017-12-09 17:53:42
【问题描述】：

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

我的路线设置如下

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

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

【问题讨论】：

标签： javascript model-view-controller ember.js

【解决方案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。

Index Routes 来自 Ember 指南。

【讨论】：