Ember selecting from a list using click, command/control and shift keys

Question

I have a list of items, which is to be selected based on the below conditions. (like in the Mac Finder)

1. Click --> Select the current item and deselect the previously selected items.

2. Command/Control + Click --> Select the current item without deselecting the previously selected items.

3. Shift + Click --> Select the item in between the items previously clicked and the current clicked item.

After selection,

1. I need to get the selected items.

2. I need to deselect all the selected items.

My Template:

<ul >
    {{#each}}
        {{#view App.TestView}}
          <li class="user">{{val}}</li>
        {{/view}}
    {{/each}}
</ul>

JavaScript:

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return [{'val':'red', 'isActive': false},{'val':'blue', 'isActive': false},{'val':'green', 'isActive': false},{'val':'yellow', 'isActive': false},{'val':'orange', 'isActive': false},{'val':'pink', 'isActive': false}];
    },
    actions: {
        changeBgSelection: function (params) {
            var temp_obj =this.get("controller").objectAt(this.modelFor("index").indexOf(params));
            temp_obj.isActive=true;
        },
        deSelectAll: function(){
            this.get("controller").setEach("isActive", false);
        },
        getSelected: function(){
            //Get the selected items from the list
        },
        unSelectAll: function(){
            //To deselect all 
        }
    }
});  


App.TestView = Ember.View.extend({
    classNameBindings: ["isActive"],
    isActive: false,
    click: function(e) {  

        // Need to handle for click, control/command key + click , shift key + click. 

        // Need to call the method when an item is clicked 
        // this.get("controller").send("deSelectAll");
        this.set("isActive", !this.get("isActive"));
        var temp_model = this.get("context");
        this.get("controller").send("changeBgSelection", temp_model);
}

});

My JSBin Link

I could not make this happen as I am new to ember. I am learning and there is a lot to update, many thanks for your replies and help in any respect.

Answer 1

First off, you should just set the model on the view so you can actually reference it without having to pass the context back and have to search:

{{#view App.TestView model=this}}
   <li class="user">{{val}} - {{isActive}}</li>
{{/view}}

Then just add an alias to isActive and toggle that property. Additionally you can just use e.ctrlKey, e.shiftKey, e.metaKey for finding out if the ctrl/shift/command is clicked. I've included a small example to get you started.

App.TestView = Ember.View.extend({
  classNameBindings: ["isActive"],
  isActive: Ember.computed.alias('model.isActive'),
  click: function(e) {  
    if(e.ctrlKey) {
      this.toggleProperty("isActive");
    }else{
      this.get("controller").send("deSelectAll");
      this.toggleProperty("isActive");
    }
  }
});

http://jsbin.com/kocupegi/2/edit