javascript - Ember.js Bootstrap 事件选项卡

Question

我正在使用 Ember.js 和 Bootstrap 创建一个应用程序。该应用程序有 2 条路线 accounts.devices.devices1 和 accounts.devices.devices2。我不需要路线 accounts.devices 但它可以在必要时存在。但不应该有它的链接。我遇到了 active 的问题。在 accounts.devices.devices1 页面上，指向设备 1 的链接被设置为事件，但我还想要指向 accounts.devices 的链接。基本上只要下拉列表中的 child 处于事件状态，我也希望 parent 处于事件状态。这不会将父项设置为仅激活子项:

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Devices<span class="caret"></span></a>
  <ul class="dropdown-menu">
    {{#link-to 'accounts.devices.devices1' tagName='li'}}<a href={{view.href}}>Devices 1</a>{{/link-to}}
    {{#link-to 'accounts.devices.devices2' tagName='li'}}<a href={{view.href}}>Devices 2</a>{{/link-to}}
  </ul>
</li>

此代码将父项设置为事件状态，但在单击下拉菜单而不是打开下拉菜单时也会创建指向 accounts.devices 的链接。此外，指向设备 1 和设备 2 的链接不起作用。

{{#link-to 'accounts.devices' tagName='li' class='dropdown'}}
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Devices<span class="caret"></span></a>
  <ul class="dropdown-menu">
    {{#link-to 'accounts.devices.devices1' tagName='li'}}<a href={{view.href}}>Devices 1</a>{{/link-to}}
    {{#link-to 'accounts.devices.devices2' tagName='li'}}<a href={{view.href}}>Devices 2</a>{{/link-to}}
  </ul>
{{/link-to}}

应该怎么做？

Answer 1

将disabled=true添加到顶级link-to:

{{#link-to 'accounts.devices' tagName='li' disabled=true class='dropdown'}}
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Devices<span class="caret"></span></a>
  <ul class="dropdown-menu">
    {{#link-to 'accounts.devices.devices1' tagName='li'}}<a href={{view.href}}>Devices 1</a>{{/link-to}}
    {{#link-to 'accounts.devices.devices2' tagName='li'}}<a href={{view.href}}>Devices 2</a>{{/link-to}}
  </ul>
{{/link-to}}