Can't reference variable in template event handler

Help Requests
1

I cannot get any events to fire if I reference a variable in the event declaration. This is from my template. Everything works if the onclick event handler does not reference a binding:

<img onclick="alert(this.id)" id="thumbnail_${ imageInfo.imageInfoId }" />

But if I change the event handler to reference a bound variable, the event is never fired:

<img onclick="alert('thumbnail_${ imageInfo.imageInfoId }')" id="thumbnail_${ imageInfo.imageInfoId }" />

I am super new to Aurelia, so there is a lot I do not know. Can someone help explain why this does not work and what I should be doing instead? Thank you.

Update:
OK, I can use click.delegate to call a method in my TypeScript, but I am finding that “’${ imageInfo.imageInfoId }’” is passing this literal string, not the resolved value from the binding. How can I get the bound value from the event handler?

<img click.delegate="imageClicked('${ imageInfo.imageInfoId }')" id="thumbnail_${ imageInfo.imageInfoId }" />

2

You do not need the on prefix for Events. I’d recommend looking through the getting started example in the Docs to get up to speed with the basics.

3

I am digging through the docs, but haven’t found my answer, yet. Removing the “on” from the event name did not do the trick.

4

Read these two :slight_smile:
http://aurelia.io/docs/binding/basics#dom-events
http://aurelia.io/docs/binding/delegate-vs-trigger

5

I never did manage to figure out how to pass ‘thumbnail_${ imageInfo.imageInfoId }’ as a value into an event handler method. What I did manage to do is pass $event to click.delegate and from there inspect the data- properties on the event target, which allowed me to piece together the information that I needed programmatically.

6

from your code, it should be:

<img
  click.delegate="imageClicked( imageInfo.imageInfoId )"
  id="thumbnail_${ imageInfo.imageInfoId }" />

There is no need to wrap in a string

1 Like