Warm tip: This article is reproduced from serverfault.com, please click

Multiple event handlers on a single event.trigger or event.delegate?

发布于 2016-08-25 18:18:40

I'm working on integrating PDF.JS with Aurelia, and I have two methods that I'd like to run in reaction to a scroll event. Generally, I would consolidate these two functions into one method. However, for my use case, I need to use a different binding behavior for each method.

I have a renderHandler that I would like to use with scroll.trigger like so:

<div ref="container" class="pdf-container" scroll.trigger="renderHandler() & debounce:250">

However, I also have another scrollHandler (which, instead of handling render events, will now only handle value binding updates, such as the page number while scrolling) that I'd like to use with the throttle behavior like this:

<div ref="container" class="pdf-container" scroll.trigger="scrollHandler & throttle">

Separately, these work. I'm not sure how to put them together. Aurelia currently doesn't allow multiple expressions inside of a trigger or delegate expression, and duplicating the property in the element has no effect (as the duplicate probably gets clobbered during Aurelia's parsing).

Is there a way to declaratively use two handlers with different binding behaviors for the same event?

Questioner
jedd.ahyoung
Viewed
0
Jeremy Danyow 2016-08-27 01:07:22

The framework currently does not support multiple event bindings for the same event, element and binding command combination.

As a workaround, you could add a trigger2 binding command:

import {SyntaxInterpreter} from 'aurelia-templating-binding';
SyntaxInterpreter.prototype.trigger2 = SyntaxInterpreter.prototype.trigger;

Then you would be able to use scroll.trigger and scroll.trigger2 on the same element.

Example:

https://gist.run/?id=b51e1c0ff28de5d19d1018881399c4e4