Setting "active" state on Twitter Bootstrap dropdown in Ember with "each" helper rendering dropdown items

Using Twitter Bootstrap and Ember, I'm trying to set the "active" state on the dropdown when a child item is selected, when that child was rendered using an "each" loop.

e.g.:

Snippet of my navbar in emblem:

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...

link-li helper from Add "active" class to bootstrap dropdown menu when dropdown link selected (with Ember link-to)

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

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

This works great in these cases:

• Home is highlighted when on the index route


• Each item is highlighted when on each item route


• The Create New link is highlighted when on the items.new route


• The dropdown itself is highlighted when on the items.new route

But, the dropdown does not get highlighted when on each of the individual item routes.

I've investigated as far as finding out that this.get('childViews') only returns the one "Create New" view, seemingly ignoring the other items. It appears to be related to the each helper, because any additional regular links added under "Create New" will work just fine. And that's where my n00b Ember knowledge ends.

Any help would be appreciated!