can someone explain how this call function works in this method

Question

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?

Answer 1

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.

5. 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.

6. 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 :)

Answer 2

In Javascript functions can be called via call method , reason functions can be a variable.

var p = function(x)
{
    console.log('calling via Call method. arguments: ' + x);
}

Now if I want to call this function , one way to call this is using call method as below.

p.call(null,'test')

more details on call function here.

I think wiring up the objects and maps are done in hammer js inputHandler and computeInputData

https://hammerjs.github.io/dist/hammer.js

Hope that helps !

Answer 3

Javascript provide three ways of a calling a function

1. The simple way,

Suppose you have a function

function foo() {

}

and you simply call it with parenthesis like foo()

2. By using call method of Function.prototype

All right, consider the foo function again

But this time you need to see it in a different way, every function in javascript is also an object and every object has a prototype which can then have more functions and properties. So when you define a function like that foo it also becomes an object of Function and gives you two additional methods to call the function, one of them is call which expects first argument to be the context or this and then comma separated list of arguments which you want to pass to function. For example, you have a user object which have properties firstName and lastName and you want to have function which will say something to that user, you can define the function like this

function saySomething(something) {
 return "Hey " + this.firstName + " " + this.lastName} + " I wanted to say " + something
}

3. By using apply method of Function.prototype

Very much similar to call except instead of giving comma separated args you will pass an array.

More on this here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function