在 Bootstrap Nav-pills 上设置活动 class

Question

我正在使用 .nav-pills 创建一个 ui 元素到 select 我的应用程序中的路由，如下所示：

<ul class="nav nav-pills">
    {{#each item in model}}
        <li class="dropdown">
            <a class="dropdown-toggle" href="#" data-toggle="dropdown">
                {{item.name}}<b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                {{#each child in item.children}}
                    <li>{{#link-to 'child' item child}}{{child.name}}{{/link-to}}</li>
                {{/each}}
            </ul>
        </li>
    {{/each}}
</ul>

效果很好，但我暂时想不出如何让 li.dropdown 拥有 .active。我试过使用 link-to 助手并将其设置为父路由，但这似乎不起作用。

有什么想法可以让它发挥作用吗？

Answer 1

在发布这篇文章之后，我突然意识到我为 link-to 使用了 item.index 路由，而我为 li.dropdown 使用了路由。我将其更改为 item，现在可以正常使用了。

总结一下：

<ul class="nav nav-pills">
    {{#each item in model}}
        {{#link-to 'item' item tagName='li' classNames="dropdown"}}
            <a class="dropdown-toggle" href="#" data-toggle="dropdown">
                {{item.name}}<b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                {{#each child in item.children}}
                    <li>{{#link-to 'child' item child}}{{child.name}}{{/link-to}}</li>
                {{/each}}
            </ul>
        {{#link-to}}
    {{/each}}
</ul>

在 Bootstrap Nav-pills 上设置活动 class

Set active class on Bootstrap Nav-pills

ember.js