ember highlight a item in menu

index-array.js

/* lib/index-array.js */

App.IndexArray = Ember.ArrayController.extend({
  _indexName: 'index',
  _isVirtual: true,
  
  /**
   * initializer function
   * 
   * @param [Array] array           proxy target object
   * @param [Controller] content    array with parent content
   * @optional [Object] properties  additional properties, like itemController, and _indexName also.
   */
  init: function(array, content, properties){
    this._super();
    properties = Ember.merge(properties || {}, { 
      itemController: 'isActive', 
      _indexName: 'index'
    });

    this.setProperties(properties);

    this.set('container', content.get('container'));
    this.set('model', array');
    this.set('parentController', content);
  },
  
  controllerAt: function(idx, object, controllerClass) {
    var subController = this._super(idx, object, controllerClass),
        indexProperty = this.get('_indexName');

    subController.set(indexProperty, idx);

    return subController;
  }
});

is-active.js

/* lib/is-active.js */

App.IsActiveController = Ember.ObjectController.extend({
  itemIndexProperty: 'itemIndex',
  index: null,

  isActive: function(){
    var parent = this.get('parentController'),
        parentItemIndex = parent.get(this.get('itemIndexproperty'));

    return parentItemIndex === this.get('index');
  }.property()
});

menu.hbs

<ul role="menu" >
  {{#each cacheList}}
    <li {{bind-attr class="isActive:active"}} >
      <a href='#' {{action "clickItem" this}}>{{name}}</a>
    </li>
  {{/each}}
</ul>

menu.js

/* components/menu.js */

App.MenuComponents = Ember.Component.extend({
  cacheList: function() {

    return App.IndexArray.create(this.get('list'), this);
  }.property('list', 'itemIndex'),
  /* ... */
}

sample.hbs

{{menu list=products}}