【问题标题】：Emberjs - how to render nested route template without parent route content?Emberjs - 如何在没有父路由内容的情况下呈现嵌套路由模板？
【发布时间】：2019-11-28 22:39:03
【问题描述】：

总结

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

详情

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

新要求

现在要求已经改变，有必要在没有列表内容的情况下显示表单，并且在成功添加后显示没有任何表单的列表。

问题

我知道我可以放弃子路由方法并创建一个路由，例如food-add，但是有没有其他方法可以保留子路由（以及我喜欢的相应文件结构）但允许模板要在没有列表内容的情况下呈现 foods/add 吗？

【问题讨论】：

标签： ember.js routing

【解决方案1】：

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

你可以这样做：

index.hbs

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

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

食物/add.hbs

<form>
  ...
</form>

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

这里有更多关于索引路由如何工作的信息

https://guides.emberjs.com/release/routing/defining-your-routes/#toc_nested-routes

https://guides.emberjs.com/release/routing/defining-your-routes/#toc_index-routes

【讨论】：