Aurelia 2.0.0-beta.1 event handling changes

vNext
1

Aurelia 2.0.0-beta.1 updates for event linkage in templates and handling in view-models (TS/JS)

Like many of you, I immediately updated when I heard the news come out regarding 2.0.0-beta.1, and it’s an overall win in many places, I did run into some issues with events (in template and view-models) so I’m posting my findings here for anyone who is in the same situation. Please feel free to add to this thread so that we can cover more event behavior changes for the benefit of the community.

Important changes:

The <eventName>.delegate="myHandler()" construct has been removed entirely from the framework.
The <eventName>.trigger="myHandler()" construct takes its place.
( <eventName>.capture="myHandler()" is still there as well for same uses as before).

Changes to $event object (in templates or view-models):

When accessing the $event object, please note:

  • $event.path[] is apparently no longer in use (possibly removed in an effort to get rid of the browser warnings (good call, but it means us developers might need to refactor a bit).

  • $event.target is the new consolidated way to access event values, for example:

    • For lists (select elements) I’ve been using:
      • In Handler method: event.target.selectedOptions[0] to access the selected option element.
      • In Template: input.trigger="myHandler($event)" and then in the view-model’s handler method (in the TS or JS file): event.target.selectedOptions[0] to access the element as an object.

  • For simple things like text fields:

    • In Handler method: event.target.value to access the value.
    • In Template: input.trigger="myHandler($event)"

  • Focus (and blur) seem to work like input:

    • In Handler method: event.target.value to access the value.
    • In Template: focus.trigger="myHandler($event)"

(despite the bubbling differences, great job Aurelia team for homogenizing the experience!)

So to recap, if upgrading to Aurelia 2.0.0-beta.1, refactor to get rid of <eventName>.delegate="myHandler($event)" to replace with <eventName>.trigger="myHandler($event)" AND in the handler methods replace event.path[]... with event.target.value or for more complex data structures, event.target.selectedOptions[0]

I hope this helps some confused people!

10 Likes