Ember.js：headers 的最佳实践取决于 sub-route

Question

假设我有一条路线 A sub-routes A1 和 A2。所有页面都有一个header基本相同，但根据是A1还是A2略有不同

最明显的想法是将 header 放在 A 的模板中，如

{{! header here }}
{{outlet}}

但是，在这个header产生的时间点，我不知道自己是在A2还是A2。所以我需要手动检查 URL 或路线以查看我在哪里，如

isA1: Ember.computed.equal('application.currentRoute', 'A.A1')

并在 header 模板中

{{#if isA1}} {{! A1-specific stuff }} {{/if}}

但这看起来又脆又丑。

另一种方法是跳过将 header 放入 A/template 并将其转换为部分，使用某种参数从 A1/template 和 A2/template.这会工作得很好，除了遗憾的是不利用 Ember 在 parent 路由模板中指定标记的能力并通过 child 路由的标记引入 {{outlet}}。当我在 A1 和 A2 之间切换时，这也会导致 re-rendering header，如果这很重要的话。

另一个想法是让 sub-route "send" 对其 parent 采取行动，请求将某些内容包含在其 header.

中

我已经看到了所有这些方法，但是对于这种情况是否有更惯用的方法？

Answer 1

您可以不将页眉放在 A/template 中而只在其中放置一个 {{outlet}}，并在 A1/template 中包含 A1 的页眉，在 A2/template 中包含 A2 的页眉。

Ember.js：headers 的最佳实践取决于 sub-route

Ember.js: best practices for headers depending on sub-route

ember.js