@bindable in abstract base view model breaks assigned view

Framework Knowledge
1

The following behaviour breaks my code and I assume that this is a bug.

I have 2 components, inheriting from a base component.

  • AbstractComponent (abstract-component.ts)
    • CompA (comp-a.html, comp-a.ts)
    • CompB (comp-b.html, comp-b.ts)
export class CompA extends AbstractComponent {
}

<template>
    <h2>Comp A</h2>
</template>

export class CompB extends AbstractComponent {
}

<template>
    <h2>Comp B</h2>
</template>

.globalResources([
    PLATFORM.moduleName('components/comp-a/comp-a'),
    PLATFORM.moduleName('components/comp-b/comp-b')
]);

When I include my <comp-a> in the DOM, the code of comp-a.html is shown.
image
But when I add @bindable() to AbstractComponent, then the code of comp-b.html is shown.

export abstract class AbstractComponent {
    @bindable()
    messages:object[];
}

image

What I’am doing wrong or what I’m missing here?

Best,
Mike

1 Like
2

Templating: HTML Behaviors Introduction | Aurelia

TL;DR:
when using inheritance in custom elements, the customElement() decorator is required. It has something to do with the elements sharing eachothers’ metadata otherwise, which isn’t desired

2 Likes
3

Many thanks. That fixed the issue.

2 Likes