Search code examples
aurelia

Aurelia: changing the name (attribute) of a bindable

I want to know if it's possible to change the name (attribute name in HTML) of a bindable in Aurelia. Because of coding standards we're using in my current project, the attribute names we're using are very ugly, for example: m-data="someData". We prefix all class members with m. I know I can use it for the class, so the custom element names are customizable, but can I also do this for bindables?

For example:

// my-component.js

// I can use a decorator here to
// change the custom element name, which is great!
@customElement('my-component')
export class clsMyComponent {
  @bindable mData;
}

Which results in the following:

<!-- index.html -->

<my-component m-data.bind="someData"></my-component>

So what I want to do, but doesn't work, is:

@customElement('my-component')
export class clsMyComponent {
  @bindable({name: 'data'}) mData;
}

I couldn't find anything on this, I know you can set stuff like two-way binding, default value, etc. But not the name right? Any help would be appreciated!

Solution

  • So, after some research I found out the correct answer to this question. As described in the Aurelia docs (search for 'bindable signature'). You can set the attribute name like this:

    @customElement('my-component')
export class clsMyComponent {
  @bindable({attribute: 'data'}) mData;
}

    The resulting HTML:

    <my-component data.bind="someData"></my-component>