Making clicked button look active and other inactive

Learning Team
1

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';
this.get('navigations').push(navigationObject.create({
  name, icon,
}));

and in each button, an action is triggered:

click(navigation){
  this.set('currentActive', navigation.name);
  // 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!