Szworny Dziąch Szworny Dziąch - 4 months ago 36
HTML Question

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.

Answer

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>