Menu

A Conventional Blog for Convention Based Coders

Aurelia Async Bindings

What happens when we want to bind to something that returns a Promise?

Well, if we have a Promise in our viewmodel we get an extremely unhelpful display of [object Promise] on the screen, because by default we will see the string representation of the returned value.

The first time most people develop with Promises they ask “How do I get my return value?”. Well, the truth is that you never do when you call a Promise. All you ever get back is a Promise, but that Promise is guaranteed to run a piece of code that you provide (which is why it’s called a Promise!).

So, if Aurelia asks us for a value on-screen, but we don’t have one right now, can we ask it to sit and twiddle its thumbs until we’re ready? No.

So, how about if we were to say “OK, look, I’ll get it for you, and you tell me what you want me to do with it and I’ll do that when I get it”?
Now that sounds perfect!

So what we want to do is ask Aurelia what it uses to write the value into the DOM, intercept that, don’t initially bother doing it, but do it later on when the Promise we’re interested in has resolved! Easy! (ish)

In fact, instead of just not doing it for now, we could optionally display something like ‘Busy…’ while we wait. Cool stuff.