# Workaround until async-binding is available

**URL:** <https://discourse.aurelia.io/t/workaround-until-async-binding-is-available/2868>\
**Category:** Best Practices\
**Created:** [August 26, 2019, 1:45pm UTC](https://discourse.aurelia.io/t/workaround-until-async-binding-is-available/2868 "2019-08-26T13:45:22Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alfhir](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alfhir/32/1510_2.png) [@Alfhir](https://discourse.aurelia.io/u/Alfhir)\
**Post date:** [August 26, 2019, 1:45pm UTC](https://discourse.aurelia.io/t/workaround-until-async-binding-is-available/2868/1 "2019-08-26T13:45:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [August 27, 2019, 3:06am UTC](https://discourse.aurelia.io/t/workaround-until-async-binding-is-available/2868/2 "2019-08-27T03:06:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [August 27, 2019, 5:17am UTC](https://discourse.aurelia.io/t/workaround-until-async-binding-is-available/2868/3 "2019-08-27T05:17:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Alfhir](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alfhir/32/1510_2.png) [@Alfhir](https://discourse.aurelia.io/u/Alfhir)\
**Post date:** [August 27, 2019, 6:45am UTC](https://discourse.aurelia.io/t/workaround-until-async-binding-is-available/2868/4 "2019-08-27T06:45:14Z")

</div>

Thank you khuongduybui!

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

---

<div class="post-metadata">

**Author:** ![Alfhir](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alfhir/32/1510_2.png) [@Alfhir](https://discourse.aurelia.io/u/Alfhir)\
**Post date:** [August 27, 2019, 8:04am UTC](https://discourse.aurelia.io/t/workaround-until-async-binding-is-available/2868/5 "2019-08-27T08:04:08Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [August 27, 2019, 8:41am UTC](https://discourse.aurelia.io/t/workaround-until-async-binding-is-available/2868/6 "2019-08-27T08:41:44Z")

</div>

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](https://github.com/ReactiveX/rxjs/issues/3765) 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](https://github.com/zewa666/aurelia-async-binding/blob/master/src/async-binding.ts) here. So just drop this [part here](https://github.com/zewa666/aurelia-async-binding/blob/master/src/async-binding.ts#L38-L52) related to observables and in the unbind section, add the Behavior to your own app and register globally and off you go.

---

<div class="post-metadata">

**Author:** ![Alfhir](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alfhir/32/1510_2.png) [@Alfhir](https://discourse.aurelia.io/u/Alfhir)\
**Post date:** [August 27, 2019, 10:39am UTC](https://discourse.aurelia.io/t/workaround-until-async-binding-is-available/2868/7 "2019-08-27T10:39:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [August 27, 2019, 11:44am UTC](https://discourse.aurelia.io/t/workaround-until-async-binding-is-available/2868/8 "2019-08-27T11:44:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [August 28, 2019, 3:20am UTC](https://discourse.aurelia.io/t/workaround-until-async-binding-is-available/2868/9 "2019-08-28T03:20:14Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [August 28, 2019, 5:13am UTC](https://discourse.aurelia.io/t/workaround-until-async-binding-is-available/2868/10 "2019-08-28T05:13:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [August 28, 2019, 5:46am UTC](https://discourse.aurelia.io/t/workaround-until-async-binding-is-available/2868/11 "2019-08-28T05:46:53Z")

</div>

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