How to get element model in View and events in action handlers

#1

I have a list of items. I need to select an item or multiple items by pressing Shift key or Control key. JSBIN --> Link

My doubt is how to get the current clicked elements model in my View. If I can get the current clicked elements model I can trigger my action handler method to manipulate my model. Also the event object is not available directly in my action handler in the Route.

Two Points I am not clear:

  1. How to get the current clicked elements model in the View.

  2. In Route action handler, can I get the events.

Thanks

Jeevi

#2

since you don’t really need access to the event object, you can simply define an action on the UserController:

App.UserController = Ember.ObjectController.extend({
  isActive: false,
  actions:{
    changeBgSelection: function () { 
       this.set('isActive', !this.get('isActive'));
    }
  }
});

and then for the action on the div, call the action by name:

<div {{action "changeBgSelection" on="click" allowedKeys="shift"}} {{bind-attr class=':user isActive'}}>

see the jsbin for a working example

#3

@ jhsu,

Thanks for your reply. I am able to select the items with shift key pressed. Also need to select the item on Control key press and right click. When I give allowdedKeys=“shift control”, then on control/command key press the action is not triggered. Is there any other key name to specify for command key in Mac.

Also I need to select the item on right click ( contextmenu ), I tried giving on=“click contextmenu”, but it was not working.

Thanks

Jeevi

#4

@ramchiranjeevi for contextMenu I think you’ll need to use view events, so maybe something like:

App.UserView = Ember.View.extend({
  templateName: 'user',
  classNameBindings: ['user', 'isActive'],
  user: 'user',
  isActive: false,

  modifierKeyPressed: function(event) {
    return (event.shiftKey==1 || event.ctrlKey==1);
  },
  click: function(e) {
    if (this.modifierKeyPressed(e)) {
      this.set('isActive', !this.get('isActive'));
    }
  },
  contextMenu: function(e) {
    if (this.modifierKeyPressed(e)) {
      this.set('isActive', !this.get('isActive'));
    }
  }
});

more if it in action: http://jsbin.com/sagab/3/edit

#5

@jhsu Thanks for your reply and its working fine. I will integrate it in my build and get back to you if I face any hurdles.

#6

@jhsu I got an issue in the above implementation. When I select the list in my view the index model is not updated. I need to maintain the selection state in my global index model.

After selection is done I need to get the selected list of items. So I have made some changes to the code. I could not reset all the selected items and the global index model.

JSBIN --> Link

Thanks

Jeevi