Skip to content

Instantly share code, notes, and snippets.

@hysios
Last active August 29, 2015 14:06
Show Gist options
  • Save hysios/8e11daf61f21d30a384c to your computer and use it in GitHub Desktop.
Save hysios/8e11daf61f21d30a384c to your computer and use it in GitHub Desktop.
ember highlight a item in menu
/* 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;
}
});
/* 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()
});
<ul role="menu" >
{{#each cacheList}}
<li {{bind-attr class="isActive:active"}} >
<a href='#' {{action "clickItem" this}}>{{name}}</a>
</li>
{{/each}}
</ul>
/* components/menu.js */
App.MenuComponents = Ember.Component.extend({
cacheList: function() {
return App.IndexArray.create(this.get('list'), this);
}.property('list', 'itemIndex'),
/* ... */
}
{{menu list=products}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment