Check "isBound" for bindable in component

vNext
1

I have a Au2 component with a bindable property like:

export class MyComponent {
    @bindable
    prop: string;
}

Is there any way to find out if the property has been bound or not?

<my-component prop="abc"></my-component> // is bound
<my-component prop.bind="undefined"></my-component> // is bound
<my-component></my-component> // is *not* bound

Thanks for any help!

UPDATE:

It would work like this, but I don’t know weather this is a “public” api:

binding(initiator: IHydratedController, parent: IHydratedController)
{
     const myPropIsBound = parent.bindings.some(b => b['targetProperty'] === 'prop' && b.isBound);
}

IHydratedController is available in ‘@aurelia/runtime-html’ namespace, but targetProperty is missing in typescript type (IBinding).

2

What about something like this?

binding() {
 const isBound = this.prop ?? false
}

propChanged() {
  // do something when prop is not null?
}

if prop is not defined in the binding hook, then you can assume that it has not been bound?

3

Unfortunately this is not sufficient, as I need to know, weather the prop is bound (even with a null value), not weather a value is bound.

<my-component prop="abc"></my-component> // is bound
<my-component prop.bind="undefined"></my-component> // is bound
<my-component></my-component> // is *not* bound`
4

The information you are looking for can be found in the instruction of a custom element. Example here Aurelia app - conventions - Vite (forked) - StackBlitz

1 Like
5

Thanks a lot @bigopon!