Aurelia Command (Promise Binding) is a gist I felt I needed to post as it took several missteps to complete, a lot of back and forth with Aurelia’s documentation, and an unhealthy dose of frustration for something I thought should be easy to do in Aurelia and possibly should be easy to find an existing working example. Hopefully this gist and the below write-up may come in handy to others looking for similar functionality.
What I Was Looking For
I wanted a way to systematically intercept any click.trigger
binding on a button that returned a promise and add a
modicum of progress reporting (disable the button, Toastr notifications, maybe a spinner like NProgress).
What I Built
The gist is an Aurelia Custom Attribute
that can be used in place of click.trigger
, once it has been required into your view: command.call
.
Lessons Learnt
These things in particular took a surprising while to find flipping back and forth between Aurelia’s documentation pages and source code.
bindingContext
The bindingContext
passed to a Component’s bind(bindingContext, ...)
is the VM object. In one mostly finished version
I was still using command.bind
and trying to Function.bind()
the function being bound to the attribute’s value and
bindingContext
was what I needed for that, but I hadn’t realized what bindingContext
was, it’s name and the documentation
didn’t quite make it clear. (Enter painful breakpoint inspections and console.log
debugging.)
Call Data Binding
This was the big piece I needed that lead to the search for something like bindingContext
in the first place, which I finally
discovered in Aurelia’s Cheat Sheet while looking for something unrelated later in the day. .call
is the magic binding syntax
supported by .trigger
and .delegate
, but available to custom attributes. I understand why these things have different names,
but it makes discoverability tough and makes me wonder if there might have been a way to better unify some of the .
binding
actions in Aurelia.
Aurelia Cheat Sheet
The most complete Aurelia documentation still seems to be the Cheat Sheet. I guess the lesson is check and re-check the Cheat Sheet. Hopefully the rest of Aurelia’s documentation might eventually catch up. Especially there seems to be need of a good Data Binding focused document (especially for those coming from Durandal because Knockout had pretty strong documentation on its data binding engine).