EmberJS - how to add a class on click?

In my list, when a user click on a fruit that should added a class name as highlight. I am trying for that, But not working. any one help me here? ( when user select other fruit, the previous fruit highlight has to removed ) so only one fruit highlighted on click.

here is my try :

twiddle here

my template :

<h2>This is from Index page</h2>
<ul>

    <li  class="" ></li>

</ul>

my route :

import Ember from 'ember';

export default Ember.Route.extend({
  isSelected : false,
  model(){
    return ["Mango","Orange","Apple"]
  },

  actions : {
    selected(fruit){
      console.log( fruit );
        this.toggleProperty('isSelected');
    }
  }
});

Thanks in advance