Custom attribute bindable property does not call callback

Help Requests
1

I am on v26-alpha, but tried it again on v33-alpha, to no avail.

I am creating a custom attribute like this:

import { bindable, customAttribute, INode } from "aurelia";

@customAttribute("btn-disabled")
export class BtnDisabled {
  @bindable({ primary: true })
  val: boolean;

  constructor(@INode private element: HTMLElement) {}
  bound() {
    const el = this.element.children[0] as HTMLElement;
    if (this.val) el.classList.add("disabled");
  }

  valChange(a: boolean, b: boolean) {
    const el = this.element.children[0] as HTMLElement;
    console.warn(this.val);

    if (this.val) el.classList.add("disabled");
  }
}

However, when I try to utilise it, binding does not work

<div btn-disabled.bind="isBtnDisabled"></div>

However, changing the value of isBtnDisabled does not trigger the valChange callback.

What am I doing wrong here?

2

So I think you have the wrong function name perhaps?
Shouldn’t it be: valChanged()

1 Like
3

I will need to check the code tomorrow again for that but I am thinking that is most likely a typo I did when writing down here since I deleted a lot of irrelevant stuff to make the code smaller. However, if it turned out to be the reason, I would be very happy. Way easier to fix after all :smile:

4

It seems to working though

1 Like
5

So, it seems that this indeed works.

The docs shows imports from aurelia-framework, so that is what I started with. I even explicitly used the bindable’s callback attribute to specify the onchange handler. None worked. I changed the imports to aurelia package, tried upgrading the version etc. but none worked. Now, I basically copy/pasted my own code in the OP, fixed the typo, restarted webpack, and it worked.

Odd. I guess if initially I started with aurelia, instead of aurelia-framework like examples in docs, I would not have this issue. Can we update these examples? Or can I somehow contribute to updating these?

2 Likes
6

It’s good to know that you have made it work!

Note that aurelia-framework is Aurelia1 and the aurelia package is the one that you are after, as it seems that you are trying to use Aurelia2.

The Aurelia2 docs are located here: https://docs.aurelia.io/. I think the examples do not import stuffs from aurelia-framework. If there is any error in the docs, or you have an idea to improve it, feel free to create a PR for the GitHub - aurelia/aurelia: Aurelia 2, a standards-based, front-end framework designed for high-performing, ambitious applications. repo. The docs are located here: aurelia/docs at master · aurelia/aurelia · GitHub. We are always glad for community contributions!

Have fun with Aurelia2.