1

For the current project at work, we are creating quite a few custom controls that all share the same properties and that are bindable.

@bindable required: boolean = false;
@bindable minLength: number = 0;
@bindable maxLength: number = 0;

Since we'd like to avoid code duplication, the idea is to keep these bindable properties in a separate class, called 'Validation' in this case. 

import {Validation} from "./validation";

export class MyClass {
  private validation: Validation = new Validation();

  // also tried:
  // @bindable validation: Validation = new Validation();
}

The question is how to get the HTML to bind to the properties in the Validation class. Doing this validation.required.bind="someProperty.required" doesn't update the required property on the validation instance. We attempted to use DI, but that didn't seem to cut it either.

import {inject} from "aurelia-framework";
import {Validation} from "./validation";

@inject(Validation)
export class MyClass {
  constructor(private validation: Validation) {
    this.validation = validation;
  }
}

Any hints would be greatly appreciated.

EDIT:

It seems that Aurelia interprets 'validation.required' as a command rather than an expression.

WARN [templating-binding] Unknown binding command. Object {defaultBindingMode: null, attrName: "validation", attrValue: "true", command: "required", expression: null}

Jeremy Danyow
  • 26,470
  • 12
  • 87
  • 133
Frances Brussee
  • 11
  • 5
  • Though support for binding to elements of base classes will be supported in one of the upcoming releases of Aurelia, there is another way to save doubling the logic: By adding the bindable properties by means of a decorator. I have explained that over here: stackoverflow.com/a/45361429/1521227 – – Spontifixus Jul 27 '17 at 21:41
  • While this not answers this question directly, there is another approach to this that might help you - and that is to use composition instead of inheritance. I have explained over here how that works: https://stackoverflow.com/a/45361429/1521227 – Spontifixus Aug 09 '17 at 15:24

1 Answers1

0

As a work-around until inheritance with bindable properties gets supported in Aurelia, I am binding to a class that has some of the shared properties. The bindable ones will get duplicated across the controls for now.

import {bindable, bindingMode} from "aurelia-framework";
import {IControlBase, ControlBase} from "./controlbase";

export class MyClass {
  @bindable controlbase: IControlBase = new ControlBase();
  @bindable label: string = "";
  @bindable editing: boolean = false;
  @bindable({ defaultBindingMode: bindingMode.twoWay })
  value: string;
}
Frances Brussee
  • 11
  • 5