Workaround until async-binding is available

Hello!

Until we have an official async binding in V2, what would be the prefered way to bind async properties to a custom element (without using @zewa666´s plugin).

I am trying to bind data only via the view like
<select-sub-organization subs.bind='this.organizationService.getAllSubOrganizations()' element.ref="selectSubOrganizationElement"></select-sub-organization>

but then i dont know, in what lifecycle-event in the custom element i should wait for the promise to resolve / how to override the binding context like “wait for it…then bind”

Best
Alfhir

1 Like

Lol was about to mention the Plugin as quick reply :). Why cant you use that?

2 Likes

For those who are interested in the aforementioned plugin: https://github.com/zewa666/aurelia-async-binding

2 Likes

Thank you khuongduybui!

I should have done so myself, but i was in a hurry. :flushed:

1 Like

@zewa666
I have to be concerned about bundle size. But afaik, when using webpack, everything from rxjs but { Observable, Subscription } will be removed, right?

Thx, Greetings

1 Like

Hey @Alfhir,

yes there are still some concerns around proper bundling and honestly I haven’t looked into them since v6. Here’s an issue I’ve found quickly googling. I’m sure there is a way to properly do so but it most likely requires some tweaking. Essentially the whole Angular crowd is running on Webpack and naturally using RxJS due to it being a dependency so I guess that must be doable.

The thing though is that if you solely need to bind to async promises you can just copy over the necessary part from the plugin to your own code and reuse it. It’s not more than this small BindingBehavior here. So just drop this part here related to observables and in the unbind section, add the Behavior to your own app and register globally and off you go.

2 Likes

Hi @zewa666,

thanks you very much for the detailed answer.
I didn´t know you could send links to lines w. github - very cool!

I have to admit, that i´ve tried the plugin this morning and couldn´t get it to work.
Installed the plugin and rxjs, bound globally and thought that
<custom-element foo.bind="someMethodReturningAPromise() & async"></custom-element>
or
<custom-element foo.bind="someMethodReturningAPromise() & async : {property : 'label'}"></custom-element>
would do, but sadly had no success.

Maybe next time i get grumpy for writing boilerplate in the VM just to show some delayed value, i´ll try again.

Best

1 Like

Sure, if you need help just create a small repro so we can take a look at whats happening

2 Likes

I have seen an issue where [i18n] custom attribute (from aurelia-i18n plugin) does not work in my custom elements because the plugin is (lazily) loaded after custom elements have been registered.

I used aurelia-async-binding in a past project and the [async] binding behavior worked fine for me, but I only used it with default HTML elements. Maybe give that a try?

2 Likes

It looks like there can be a much leaner async binding behavior implementation without rxjs but only supports promise. That might be a good feature in Aurelia 2 core.

2 Likes

The plugin itself doesnt really need rxjs aside from typings so if the provided value is duck-typed to an observable it can do the necessary steps even without the dependency

2 Likes