Emberjs-如何在没有父路由内容的情况下呈现嵌套路由模板？

Question

摘要

我想继续使用嵌套路由，但是在访问嵌套路由时不显示顶级内容。我不确定是否有可能？

最初，我的要求是显示食物清单，并为用户提供添加食物的选项foods/add。使用列表模板顶部的outlet标签可以使表单添加食品项在列表顶部可见，添加后导致显示的列表中没有表单，则转换回food。

需求现在已更改，有必要显示不包含列表内容的表单，并在成功添加后显示不包含任何表单的列表。

我知道我可以放弃子路由方法并创建诸如food-add之类的路由，但是还有其他方法可以保留子路由（以及我喜欢的相应文件结构），但允许使用模板作为foods/add要在没有列表内容的情况下渲染？

Answer 1

每个路由都有一个索引模板，该索引模板仅在不存在子路由时才可见。

您可以做这样的事情：

index.hbs

{{#each foods as |food|}}
  {{food}}
{{/each}}

<LinkTo @route="food.add">Add</LinkTo>

food / add.hbs

<form>
  ...
</form>

{{!-- submitting this form would add the new food to the list of foods
      and then also transition back to `food` --}}

这里有一些有关索引路由工作方式的更多信息