Aurelia Components: Function Binding with .call
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.
.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.
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.
usage in app.html
As soon as the user clicks the checkbox, the
change.delegate will call directly our callback function, that we passed to the element
.call binding. We could also set some function inside the element, do something and then call the passed function.
This example could be used inside a kind of form controller which would use the callback to en- or disable parts in a form dependent on the checkbox state.
The next example is using a custom attribute for dynamic data loading. This custom attribute can be applied to any list, you just need to define the function that will care about the data loading.
usage in app.js
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 items
to which our list is bound to.
.call is your friend
.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 :)