AUR0228

Error Message

AUR0228: @bindable cannot be used as a class decorator when no configuration object is supplied.

Description

This error occurs when the @bindable decorator is applied directly to a class declaration without providing a configuration object as an argument.

Cause

The @bindable decorator can be used in two ways:

1. Property Decorator: Applied directly to a class property (field or getter/setter). In this case, it implicitly configures that specific property as bindable.

   @bindable public myProp: string;

2. Class Decorator: Applied to the class itself. This usage allows defining multiple bindable properties at once via a configuration object. When used this way, @bindable must be given a configuration object argument specifying the properties to make bindable. Using it without an argument (@bindable class MyClass {}) is invalid because the decorator doesn't know which properties to target.

Solution

If you intend to use @bindable as a class decorator, you must provide a configuration object that defines the properties to be made bindable. The keys of this object are the property names (as strings), and the values are optional individual bindable configurations for each property.

If you only intend to make a single property bindable, apply the @bindable decorator directly to that property instead of the class.

Example

import { bindable, customElement } from 'aurelia';

// Incorrect: @bindable used as class decorator without configuration
@bindable
@customElement({ name: 'my-component-incorrect', template: `...` })
export class MyComponentIncorrect {
  // Properties here are not automatically made bindable by the class decorator
  prop1: string = 'value1';
  prop2: number = 123;
}

// Correct: Using @bindable as a class decorator WITH configuration
@bindable({
  prop1: { attribute: 'prop-one' }, // Configure prop1 with specific attribute mapping
  prop2: {} // Configure prop2 with default settings
})
@customElement({ name: 'my-component-correct-class', template: `...` })
export class MyComponentCorrectClass {
  prop1: string = 'value1';
  prop2: number = 123;
}

// Correct: Using @bindable as property decorators (often simpler)
@customElement({ name: 'my-component-correct-property', template: `...` })
export class MyComponentCorrectProperty {
  @bindable({ attribute: 'prop-one' })
  prop1: string = 'value1';

  @bindable
  prop2: number = 123;
}

Debugging Tips

• Locate the class where @bindable is used directly on the class declaration without arguments.

• Decide whether you want to configure multiple bindables via the class decorator or decorate individual properties.

• If using the class decorator, provide a configuration object listing the properties to make bindable, like @bindable({ propName1: {}, propName2: { /* options */ } }).

• If decorating individual properties, remove the @bindable decorator from the class and apply it directly to each desired property.

</rewritten_file>