# AUR0817

## Error Message

`AUR0817: "& signal" binding behavior can only be used with bindings that have a "handleChange" method`

## Description

This error occurs when the `& signal` binding behavior is applied to a type of binding expression where it doesn't make sense or isn't supported. Specifically, the `signal` behavior works by hooking into the binding's change detection mechanism (`handleChange` method), and this error indicates the target binding doesn't have such a mechanism.

## Cause

The `& signal` binding behavior is designed to make a binding update its target (usually the view) when a specific signal is emitted via the `ISignaler`. This requires the underlying binding to be capable of reacting to changes.

The most common cause for this error is applying `& signal` to a binding type that inherently doesn't react to changes in the same way, such as:

1. **One-time bindings:** Using `& signal` with `one-time` bindings (e.g., `<div textcontent.one-time="myProp & signal:'my-signal'">`) is invalid because `one-time` bindings are evaluated only once and do not listen for changes.
2. **Unsupported Custom Bindings:** Applying it to a custom binding implementation that doesn't expose or correctly implement the necessary `handleChange` method interface expected by the signaling mechanism.

## Solution

1. **Use Appropriate Binding Mode:** Ensure you are using `& signal` with bindings that support change detection, typically `to-view` (`.bind`), `two-way` (`.two-way`), or interpolation (`${ }`). Do not use it with `one-time`.
2. **Verify Binding Type:** If you are using `& signal` within the context of a custom attribute or element, ensure the underlying binding it's attached to supports the `handleChange` interface required for signaling.
3. **Remove `& signal`:** If the binding truly doesn't need to react to signals (or is inherently `one-time`), simply remove the `& signal` behavior from the expression.

## Example

```html
<!-- Assume myData is a property and 'data-updated' is a signal -->

<!-- Incorrect: Applying signal to a one-time binding -->
<p textcontent.one-time="myData & signal:'data-updated'"></p>

<!-- Correct: Applying signal to a default (to-view) binding -->
<p textcontent.bind="myData & signal:'data-updated'"></p>
<p>${myData & signal:'data-updated'}</p>

<!-- Correct: Applying signal to a two-way binding -->
<input value.two-way="myData & signal:'data-updated'">

<!-- Correct: Simply remove signal if the binding is meant to be one-time -->
<p textcontent.one-time="myData"></p>
```

```typescript
// View Model Example
import { customElement, resolve } from 'aurelia';
import { ISignaler } from '@aurelia/runtime-html';

@customElement({ /* ... */ })
export class MyComponent {
  private signaler = resolve(ISignaler);
  myData = 'Initial Value';

  updateData() {
    this.myData = `Updated at ${new Date().toLocaleTimeString()}`;
    // Signal that the data needs refreshing in bindings listening for 'data-updated'
    this.signaler.dispatchSignal('data-updated');
  }
}
```

## Debugging Tips

* Identify the binding expression where the `& signal` behavior is causing the error.
* Check the binding command used (`.bind`, `.one-time`, `.two-way`, etc.) or if it's an interpolation (`${}`).
* If it's a `one-time` binding, remove `& signal` or change the binding mode.
* If it involves custom elements/attributes or complex bindings, inspect the implementation details of the binding to see if it supports the necessary change handling for signals.