Question

我正在使用.nav-pills创建一个ui元素来在我的应用中选择路径，如下所示：

<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

发布此信息之后，我突然意识到我使用了item.index路由来link-to用于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上设置活动类

1 个答案: