# AUR0508

## Error Message

`AUR0508: Observer for property <property> does not support change handler.`

Where `<property>` is the name of the bindable property defined with a `changeHandler`.

## Description

This error occurs when a custom element defines a bindable property using `@bindable` (or `bindables`) and specifies a `changeHandler` method name, but the observation mechanism Aurelia selects for that property does not have the capability to invoke the specified change handler method when the property's value changes.

## Cause

Similar to `AUR0507` (coercion support), this usually relates to the observation strategy used for the property:

1. **Custom Observation Strategy:** A custom observer might be in use for the property, and that observer lacks the necessary implementation to detect and call the method specified by the `changeHandler` option in the bindable definition. Standard Aurelia observers for view model properties generally support change handlers.
2. **Non-Standard Property Definition:** The property might be defined in a way that hinders standard observation supporting change handlers (though this is less likely than with coercion).
3. **Internal Framework Issue (Unlikely):** A potential mismatch or bug in how Aurelia links the bindable definition's `changeHandler` to the selected property observer.

Standard usage should work:

```typescript
import { bindable } from 'aurelia';

export class MyComponent {
  @bindable({ changeHandler: 'countChanged' })
  public count: number = 0; // Standard usage, typically works

  countChanged(newValue: number, oldValue: number) {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
  }
}
```

The error implies that the observer assigned to `count` (or a similar property) cannot fulfill the request to call `countChanged` when the value is updated via a binding.

## Solution

1. **Verify Change Handler Name:** Double-check that the method name specified in `changeHandler: 'methodName'` exactly matches a method defined on the view model class.
2. **Review Property Definition:** Ensure the bindable property is a standard class property.
3. **Check for Custom Observers:** Investigate if custom observation logic is affecting the property. If so, the custom observer must be enhanced to look for and invoke the `changeHandler` method from the bindable definition when its `setValue` (or equivalent) method is called. The observer needs access to both the view model instance (to call the handler method) and the bindable definition.
4. **Use Alternative Notification:** If the observer cannot be fixed, consider alternative ways to react to changes, such as using the `@watch` decorator instead of a `changeHandler`, or performing checks in lifecycle hooks like `propertyChanged` (if applicable to the component type).

## Example

```typescript
import { bindable, IObserverLocator, IBindingContext, LifecycleFlags } from 'aurelia';

// --- Standard working example ---
export class StandardHandlerComponent {
  @bindable({ changeHandler: 'valueChanged' })
  public value: string = '';

  valueChanged(newValue: string, oldValue: string) {
    console.log(`Value changed from ${oldValue} to ${newValue}`);
  }
}

// --- Scenario potentially causing the error ---

// Imagine a custom observer that doesn't support invoking change handlers
class NonHandlingObserver {
  constructor(private obj: any, private key: string) {}
  getValue() { return this.obj[this.key]; }
  setValue(newValue: any) {
    // This observer sets the value but does NOT check for or call
    // any 'changeHandler' defined on the bindable.
    this.obj[this.key] = newValue;
  }
  // ... other observer methods ...
  subscribe() {}
  unsubscribe() {}
}

// A custom element potentially using this observer
export class CustomObservedHandlerComponent {
  // Assume Aurelia uses NonHandlingObserver for 'config'
  @bindable({ changeHandler: 'configUpdated' }) // Change handler defined
  public config: object | null = null;

  configUpdated(newValue: object | null, oldValue: object | null) {
    // This method will NOT be called if NonHandlingObserver is used,
    // and AUR0508 will be thrown during binding setup.
    console.log('Config updated');
  }

  // When <custom-observed-handler-component config.bind="..."></custom-observed-handler-component>
  // is processed, Controller#addBinding sees the 'changeHandler' but finds
  // the NonHandlingObserver doesn't support it, throwing AUR0508.
}

// --- Alternative using @watch (if changeHandler is problematic) ---
import { watch } from 'aurelia';

export class WatchAlternativeComponent {
  @bindable() // No changeHandler here
  public config: object | null = null;

  // Use @watch to react to changes instead
  @watch((c: WatchAlternativeComponent) => c.config)
  configChanged(newValue: object | null, oldValue: object | null) {
    console.log('Config changed (via @watch):', newValue);
    // Perform actions previously in the change handler
  }
}

```

## Debugging Tips

* Identify the `<property>` from the error message.
* Verify the `@bindable` definition for this property and ensure the `changeHandler` name is spelled correctly and matches a method on the view model.
* Check for custom observation configurations affecting this property.
* Set breakpoints in `Controller#addBinding` (around line 1280 in `templating/controller.ts`). Inspect the `bindable` definition and the `targetObserver`. Does the observer have properties or methods suggesting change handler support (e.g., a `hasChangeHandler` flag or specific methods)? This might involve inspecting Aurelia's internal observer types.
* Try removing the `changeHandler` from the `@bindable` definition. If the error goes away, it confirms the issue is with the observer's lack of support. Consider using `@watch` as an alternative if fixing the observer isn't feasible.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aurelia.io/developer-guides/error-messages/runtime-html/aur0508.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.