Aurelia Components: Function Binding with .call

February 05, 2017 | 4 Minute Read

One principle of Aurelia is its usage of custom components based on the web component specifications. That means, that your application is based on custom components and attributes
and you can leverage this to slice your code base into small, reusable and maintainable chunks. I want to write about some concepts to show the capabilities of
Aurelia and how you can use them to write awesome custom components/attributes, which can help to avoid complex view models.
This is the first post about function bindings, there will be further posts about other things.

.call binding command

You can use the .call binding command to pass functions references into your custom component. With this, you can achieve callbacks or kind of interceptors you
can call before doing something inside the component. Therefore you can execute code from within your component that is located somewhere outside in the containing model.

The .call binding command can be bind to custom elements or used with custom attributes:

It is possible to write the custom attribute in a more readable fashion, at least for one primary bindable.
May take a look here at the Aurelia Blog.

.call with parameters

If we want to pass method parameters to our .call function we have to use a special syntax.

Asmuming we bind a function add(x, y) to our view with <custom-element add-method.call="add(x, y)"></custom-element>
we have to call it inside of our custom-element with addMethod({x: 42, y: 17}) and create an object with our parameters as key value pairs.

Examples

In the first example, I use the .call bind to pass a callback function on a custom checkbox element.
We are passing our callback function and the labels for the checkbox.

As soon as the user clicks the checkbox, the change.delegate will call directly our callback function, that we passed to the element
trough the .call binding. We could also set some function inside the element, do something and then call the passed function.

For checking the scroll position within the list, we inject the element and start to listen for scroll events.
As soon as we determine that the user scrolled until the end, we call our load function. This will extend the itemsArray
to which our list is bound to.

loadItems(){//here you could do a REST call e.g.for(vari=1;i<=5;i++)this.items.push('new item '+i);}

.call is your friend

The .call binding is somehow underestimated, at least it is not much documented, and the most examples you can find about it are only at Stack Overflow. If you want to react in your view model on something that happens inside your component,
this can be a much better solution then sending events around or setting up a shared service.

You can find the checkbox- and the scroll-end- component as well as a one more simple example on this GistRun.

Found some typo, want to give feedback or discuss? Feel free to contact me :)