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?
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:
I thought of something else today - I might be able to use
scroll.bind
to call one of the functions, as long as it doesn't need a binding behavior or an argument.