Example of Binding Inheritance

#1

This was in the October release notes, does anyone have a simple example of how it can be used?

Inheritance of Bindables - Now you can inherit custom elements to inherit the bindable properties! This addresses the most common request for basic component inheritance scenarios.

I have come custom elements which have some bindable properties that are the same but the templates aren’t.

#2

You’ll found more info here:
https://github.com/aurelia/templating/pull/507#issue-196239446

A simple example along your description is this:

class BaseBehavior {
  @bindable frob = 4;
  @bindable bar = 2;
}

@customElement
@useView(PLATFORM.moduleName('./some-view.html'))
export class OneCustomElement extends BaseBehavior {
}

@customElement
@useView(PLATFORM.moduleName('./another-view.html'))
export class AnotherCustomElement extends BaseBehavior {
}
#3

Here is another example of using inheritance with Aurelia bindable:

class hierarchy:

  • FieldBehavior
    • TriggerField
      • NumberField
      • SelectField

The SelectField also has an override-able class method to provide template for the list, so you can override it right there, or in its sub classes