Question

使用Twitter Bootstrap和Ember，我试图设置＆＃34;活跃＆＃34;当选择子项目时，在下拉列表上显示状态，当使用＆＃34;每个＆＃34;循环。

e.g：

我的会徽中的导航栏片段：

ul.nav.navbar-nav
  link-li
    link-to 'index' | Home
  link-li classNames='dropdown'
    a.dropdown-toggle href='#' data-toggle='dropdown' Items <span class='caret'></span>
    ul.dropdown-menu
      each item in items
        link-li
          link-to 'item' item
            = item.name
      link-li
        link-to 'items.new' | Create New...

来自Add "active" class to bootstrap dropdown menu when dropdown link selected (with Ember link-to)

的

link-li帮助器

export default Ember.Component.extend({
  tagName: 'li',
  classNameBindings: ['active'],

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

这在这些情况下效果很好：

主页在index路线
每个item路线
在items.new路径
在items.new路径

但是，在每条item条路线上，下拉列表不会突出显示。

我已经调查过，发现this.get('childViews')只返回了一个＆＃34;创建新的＆＃34;看来，似乎忽略了其他项目。它似乎与each助手有关，因为在＆＃34;创建新＆＃34;下添加了任何其他常规链接。会工作得很好。那就是我的n00b Ember知识结束的地方。

任何帮助将不胜感激！

Answer 1

我找到了一个解决方案，但它有点hacky ......

给出一组这样的路线：

Router.map(function() {
  this.resource('items', function() {
    this.route('new');
  });
  this.resource('item', {path: '/items/:item_id'}, function() {
    this.route('edit');
  });
});

我可以通过添加隐藏的＆＃34;虚拟＆＃34;来获取所有相关的导航链接。使用问题中的link-li帮助程序链接。

会徽中的Navbar片段：

ul.nav.navbar-nav
  link-li
    link-to 'index' | Home
  link-li classNames='dropdown'
    a.dropdown-toggle href='#' data-toggle='dropdown' Items <span class='caret'></span>
    ul.dropdown-menu
      span.hidden
        link-to 'items' | Items
        link-to 'item' | Item
      each item in items
        link-li
          link-to 'item' item
            = item.name
      link-li
        link-to 'items.new' | Create New...

通过添加link-to 'items'和link-to 'item'虚拟链接，它可以使父link-li帮助程序正常工作，并在任何子路由处于活动状态时正确显示下拉列表。

如果有人想出更优雅的解决方案，请务必将其发布在这里！

设置＆＃34;活动＆＃34;在Twitter上使用＆＃34;每个＆＃34;帮助器渲染下拉项目

1 个答案: