# 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.

   ```typescript
   @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

```typescript
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>