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

<!-- 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>

// View Model Example
import { customElement, ISignaler } from 'aurelia';

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

  constructor(@ISignaler private signaler: ISignaler) {}

  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.