How to get the clicked element on Ember Component

Question

I'm learning EmberJS, I tried to search the docs and stuff but I couldn't get it right so far I've implemented the component and a action to respond on click event, for now it just print something in the console. I want to get the clicked element so I could change it's style and attributes. I'm using the scaffold generated by ember-cli version 0.2.7 Follows the code:

app/components/heart-like.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions:{
    click: function (event) {
      console.log(event); // undefined
      console.log("Hello from component");
    }
  }
});

app/templates/components/heart-like.hbs

 <div class="row">
      <span {{action "click"}} class="pull-right" style="color: #B71C1C;"><i class="fa fa-2x fa-heart"></i></span>
</div>

Answer 1

Ember.EventDispatcher delegates some events to the corresponding Ember.View. Since Ember.Component is a subclass of Ember.View, you can capture click events just exposing a click function:

export default Ember.Component.extend({   
  click: function (event) {
    console.log(event.target); // displays the clicked element
    console.log("Hello from component");
  }
});

Keep in mind that using directly these event hooks isn't a good practice because you're dealing directly with the DOM, and not expressing your intention. Depending of your use case it's a better alternative to just create a property in the component and change it via actions. For instance, to change the color of the icon when it's clicked:

component

export default Ember.Component.extend({
  color: 'red',
  actions:{
    changeColor: function() {
      this.set('color', 'black');
    }
  }
});

template

  <div class="row">
      <span {{action "changeColor"}} class="pull-right" style="color: {{color}};"><i class="fa fa-2x fa-heart"></i></span>
  </div>

Live demo