设置引发 = 在当前页面/模板上时对余烬按钮为 true

Question

<div class="flex">
<div class="layout-row layout-align-end-center">
{{#paper-button href="overview" raised=true primary=true}}Overview{{/paper-button}}
{{#paper-button href="incomes"}}Incomes{{/paper-button}}
{{#paper-button href="expenses"}}Expenses{{/paper-button}}
{{#paper-button href="settings"}}Settings{{/paper-button}}
</div>
</div>

所以我试图在某个页面/模板上设置提升=true。上面的代码来自我的应用程序模板。有没有办法使用 JS/Ember 执行此操作，或者我应该在每个模板中手动执行此操作？

Answer 1

我认为最好的方法是编写一个自定义组件包装paper-button。ember-route-helpers为您提供了很好的帮手来做到这一点：

{{#paper-button
onclick={{transition-to @route)
href=(url-for @route)
raised=(is-active @route)
primary=(is-active @route)
}}
{{yield}}
{{/paper-button}}

然后，您可以将该组件与{{#your-component route="settings"}}Settings{{/your-component}}一起使用。

重要的是要了解您应该同时传递操作和href。因为当人们点击按钮时，它会进行过渡并且不会重新加载整个页面，但右舔>打开和屏幕阅读器不会损坏。