烬.js引导活动选项卡

Ember.js Bootstrap Active Tab

本文关键字：选项 活动 js      更新时间：2023-09-26

我使用Ember.js和Bootstrap来创建一个应用程序。该应用程序有2个路由accounts.devices.devices1和accounts.devices.devices2。我不需要路由帐户。设备，但它可以存在，如果需要的话。但不应该有一个链接。我遇到了积极的问题。在accounts.devices.devices1页面上，到Devices 1的链接被设置为活动，但我还想要到accounts.devices的链接。基本上，只要下拉菜单中的子元素是活动的，我也希望父元素是活动的。这不会设置父节点为活动状态，只会设置子节点为活动状态:

<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}}

这应该怎么做?

添加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}}
相关文章：