css - 如何获得灵活的 Ember.js 父布局

Question

在带有{{outlet}}的Ember模板结构中，组织布局的方式一般是这样的:

resource.hbs
  - index.hbs
  - child.hbs

换句话说，如果我想使用 {{outlet}} 从子路由渲染模板，我还必须有一个 index 子路由在顶层资源路由时在导出中。

例子:

<section id="layout">
  Some layout content
</section>

{{outlet}}

当我在父资源路由中时，有没有办法不在 {{outlet}} 中呈现任何内容？

我的用例是，在上面的示例中，我希望 section#layout 为 width: 100%;，但是当在子路由中时，导出有内容，我希望 section#layout 宽度的一半。

这可能需要一些聪明的 CSS，但我认为我需要将一个类名绑定(bind)到当前路由名称，这样才能实现。

Answer 1

是的，有一种方法可以不渲染任何东西:不要使用索引子路由。在现代版本中，索引路由仍然存在(即你会在 ember inspector 中找到它)，但没有模板就没有任何东西可以渲染。