Can I assign a click event or <A> on a whole Ember component?

Question

I have an Ember component with tagName:'li'

The template looks like so:

<div> title</div>
 <div> image </div>
 <div> text </div>

The outcome is <li> blocks of the above elements, like so:

<li id="ember2484" class="...">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</li>

I need to make the <li> clickable somehow, because I have a link url that I want to assign to each <li> element.

Is that possible, to make <li> clickable?

Answer 1

• Here is a small twiddle demonstrating how to do this
• Documentation here

---

import Component from '@ember/component';

export default class extends Component {
  clickCounter = 0;

  click() {
    this.set('clickCounter', this.clickCounter + 1); 
  }
}

// or in the old syntax

import Component from '@ember/component';

export default Component.extend({
  clickCounter: 0,

  click() {
    this.set('clickCounter', this.clickCounter + 1); 
  }
});