Question

我正在使用 Twitter Bootstrap ，并且navbar有一个常规链接和一个下拉链接。使用ember的link-to帮助程序，常规链接在单击时会自动获取“活动”类，下拉菜单中的菜单项也是如此。但是，在我选择其中一个下拉菜单项时，我无法确定让父li标记获得“活动”类的最佳方法。我已尝试从下拉菜单中创建一个组件，但我无法让它工作。

.emblem中的标记：

.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

我想也许我可以通过替换“Branding”包装器

来嵌套link-tos

li.dropdown

带

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

但这使得整个下拉元素成为“admin.business.design”的链接。

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

当路线出现时，您可以看到“帐户”和“事物”处于活动状态，“品牌”下的子菜单项也是如此，但当下面的下拉项目为“我需要”时，我需要选择“品牌”好。

Answer 1

JSBin

这是我使用的解决方案。不要将{{link-to}}设为li，而是创建一个li的组件。此组件使用Ember在将任何link-to的活动类设置为当前路径时所做的工作：

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

    active: function(){
        return this.get('childViews').isAny('active');
    }.property('childViews.@each.active')
});

这是有效的，因为我们正在观察所有link-to active属性，这些属性由ember设置，并且参数传递给property()。每次路由更改时，都会重新计算所有link-to帮助程序的活动属性。

选择下拉链接时，将“活动”类添加到引导下拉菜单（使用Ember链接到）

1 个答案: