Search code examples
aurelia

can someone explain how this call function works in this method

On line 31 here --> https://github.com/benib/aurelia-hammer/blob/master/src/hammer-press.js

this.callback.call(null, { hammerEvent: event });

Can someone explain how this hammerEvent object gets mapped back to the $event object in the calling aurelia view model?

Solution

  • Can someone explain how this hammerEvent object gets mapped back to the $event object in the calling aurelia view model?

    There are a few things happening to get there.

    Say you're using it in your view like so:

    <div hammer-tap.call="handleTap($event)">
</div>

    1. When compiling the hammer-tap attribute, aurelia-templating-binding will go through a list of conventions to map the binding attributes to the correct expressions.

    2. Based on the convention for .call as you can see in syntax-interpreter, it's translated to a CallExpression (located in aurelia-binding)

    3. When compilation is done and bind() is invoked on the components, this CallExpression sets a delegate on the target that invokes callSource with whatever value it gets from the target (in your example: { hammerEvent: event }

    Now it's a little tricky to fully cover this because of the depth and recursion in how Aurelia resolves all of this, but somewhere along the line a ListenerExpression is created (createBinding is invoked by ViewFactory in aurelia-templating) which essentially adds an event listener to the element in question.

    1. That ListenerExpression would invoke hammer's handleSwipe method with the correct event.

    I believe that's not actually what happens in this particular scenario, because the author seems to use hammerjs's own event handler with .on and .off. So it would actually be hammerjs passing that event to handleSwipe from a regular event listener.

    1. Back to CallExpression, callSource will ultimately invoke the function that was bound to .call and pass in the $event that it received from ListenerExpression (or hammerjs's handler) earlier.

    Hopefully, this was somewhat helpful. But as you can see, it's quite involved :)