Making clicked button look active and other inactive


There’s an existing similar question. But the difference is that I want to implement each button in a single component unlike the other’s implementation where he has a single component for each button.

I did this like this:

I created an ember object for each button in my component:

let navigationObject = Ember.Object.extend({
  name: "",
  icon: "",
  flag: 0,
  isActive: Ember.computed('flag', function(){
    let isActive = this.get('name') === self.get('currentActive');
    return isActive ? "active" : "";
// then I add a button on my component like this
let name = 'list', icon = 'icon-list';
  name, icon,

and in each button, an action is triggered:

  // had to change flag so ember knows the currentActive button is changed
  this.get('navigations').forEach(x => {
    x.set('flag', x.get('flag') + 1 );

Here’s my twiddle.

Everthing is working well. My question is this: are there any problems with my implementation? or is there an easier way to do this.

Thanks guys!