CODEWITHSUNDEEP
javascripthtmlevent-delegationaurelia
Marek M.
Marek M.

Reputation: 3951

click.delegate for ul items in AureliaJS

Given ul list defined as below:

<ul click.delegate="onListItemClick()">
    <li repeat.for="suggestion of suggestions">
        ${suggestion.name}
    </li>
</ul>

How do I pass suggestion object to onListItemClick? I know I can put click.delegate on each individual li element and then capture current suggestion but won't it go against event delegation idea? I mean - then I will have multiple event handlers attached, and if so I could just go with click.trigger. I don't want to do this, because there may be tons of these suggestion objects.

Upvotes: 2

Views: 2208

Answers (1)

Ashley Grant
Ashley Grant

Reputation: 10887

Put the click handler on the li element. That's the whole point of event delegation with Aurelia. It allows you to do stuff just like this without the overhead of creating a bunch of event handlers. There's just one event handler that is created by the framework for you. It delegates the calls. All of the elements click event will be set to the same function and Aurelia will handle calling your VM method.

Here's a gist.run: https://gist.run/?id=406bf3bc73e415db7afa7d46d7e958d3

<template>
  You clicked suggestion id "${clickedId}"
  <ul>
    <li repeat.for="suggestion of suggestions" click.delegate="handleClick(suggestion)">
      ${suggestion.name}
    </li>
  </ul>
</template>

Upvotes: 5

Related Questions