添加“活性”选择下拉链接时使用类引导下拉菜单（使用Ember链接） [英] Add "active" class to bootstrap dropdown menu when dropdown link selected (with Ember link-to)

问题描述

我正在使用 Bootstrap ，并且有一个 navbar ，带有常规链接和下拉链接。使用ember的链接到帮助器，常规链接在点击时自动获得活动类，下拉菜单中的菜单项也如此。但是，我无法为我的生活找出当选择一个下拉菜单项目时，最好的方法来获取父级 li 标签以获取活动类。我尝试从下拉菜单中创建一个组件，但我无法使其正常工作。

I'm using Twitter Bootstrap and have a navbar with a regular link and a dropdown link. Using ember's link-to helper, the regular link automatically gets the "active" class when clicked, as do the menu items in the dropdown menu. However, I cannot for the life of me figure out what the best way to get the parent li tag to get the "active" class when one of the dropdown menu items is selected. I've tried creating a component out of the dropdown menu but I cannot get it to work.

标记在。会徽：

.navbar.navbar-default.navbar-static-top
  ul.nav.navbar-nav

    //---------//
    // Account //
    //---------//

    link-to 'admin.business.index' tagName="li" href=false
      a href="#" Account

    //----------//
    // Branding //
    //----------//

    li.dropdown
      a.dropdown-toggle data-toggle="dropdown" href="#"
        ' Branding
        span.caret
      ul.dropdown-menu role="menu"
        link-to 'admin.business.design' tagName='li' href=false
          a href="#" Design
        link-to 'admin.business.email' tagName='li' href=false
          a href="#" Email Templates
        link-to 'admin.business.url' tagName='li' href=false
          a href="#" Vanity URL

我以为也许我可以嵌套链接 - 替换品牌包装

I thought maybe I could nest the link-tos by replacing the "Branding" wrapper

li.dropdown

与

link-to 'admin.business.design' tagName='li' href=false class="dropdown"

但这会使整个下拉单元成为一个链接到admin.business.design。

but that makes the entire dropdown element a link to "admin.business.design".

我在这里创建了一个bin： http://emberjs.jsbin.com/cosute/2/edit?html,output 。

I've created a bin here: http://emberjs.jsbin.com/cosute/2/edit?html,output.

您可以看到路线中的帐户和事情处于活动状态，而品牌下的子菜单也是如此，但是当需要品牌

You can see that "Account" and "Thing" are active when the route is, and the submenu items under "Branding" are as well, but I need "Branding" to be selected when a dropdown item under it is as well.

推荐答案

JSBin

这是我使用的解决方案。而不是使 {{link-to}} 成为 li ，使一个利。该组件利用Ember在将当前路线的任何链接到的活动类设置中使用的工作：

This is the solution I used. Instead of making {{link-to}} be a li, make a component that is a li. This component makes use of the work Ember does in setting the active class for any link-to to the current route:

App.NavItemComponent = Ember.Component.extend({
    tagName: 'li',
    classNameBindings: ['active'],

    active: function(){
        return this.get('childViews').isAny('active');
    }.property('[e-mail]')
});

这是因为我们观察所有链接到 活动由ember设置的属性，参数传递给 property（）。每次路由更改时，所有链接到帮助者都会重新计算活动属性。

This works because we are observing all of the link-to active properties which are set by ember with the parameter passed into the property(). The active property is recomputed for all link-to helpers each time a route changes.

这篇关于添加“活性”选择下拉链接时使用类引导下拉菜单（使用Ember链接）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！