Get HTML element of the clicked link in a View

1

How do I get the current HTML element of the link being clicked in a View backing the entire template? Must I have a View backing each link?

I am currently using this in the template:

<a class="btn btn-danger btn-xs" {{action "delete" room target=view on="click"}}>
 Del
</a>

And this is the view:

import Ember from 'ember';

export default Ember.View.extend({
  actions:{
	  delete: function(evt){
	  	console.log(this.get('element'));
	  }
  }
});

However this returns the div for the View, and not the markup for the link. I have also tried evt.target, and a bunch of other stuff.

Any ideas how to approach this? Can this be accomplished with a view encompassing the entire template?

2

this.$() you can put any jquery selector, the root is the view( dom ). /Stephen.

3

@maitriyogin thanks, but that gives me the encompassing DIV for the entire template and not the A HREF which resides within and was clicked. Any ideas on that?

4

@emorling, use this initializer:

// app/initializers/customize-action-handler.js
import Ember from 'ember';
export default {
    name: 'customize-action-handler',
    initialize: function(){
        var ActionHelper = Ember.Handlebars.ActionHelper,
            originalRegisterAction = Ember.Handlebars.ActionHelper.registerAction;
        Ember.Handlebars.ActionHelper.registerAction = function(actionNameOrPath, options, allowedKeys){
            var actionId,
                args = Array.prototype.splice.call(arguments, 0),
                originalRegisteredActionHandler;
            actionId = originalRegisterAction.apply(this, args);
            originalRegisteredActionHandler = ActionHelper.registeredActions[actionId].handler;
            ActionHelper.registeredActions[actionId].handler = function handleRegisteredAction(event) {
                if (Ember.get(options, 'parameters.options.hash.sendEvent')){
                    options.parameters.params.push(event);
                }
                originalRegisteredActionHandler.call(this, event);
            };
            return actionId;
        };
    }
}

and in your template:

<a class="btn btn-danger btn-xs" {{action "delete" room target=view on="click" sendEvent=true}}>
 Del
</a>

The above initializer will concat the original jquery event to the action handler arguments, so your view will now have access to the original event

import Ember from 'ember';

export default Ember.View.extend({
  actions:{
	  delete: function(room, evt){
	  	var target = evt.target;
	  }
  }
});

JS Bin Demo

1 Like