AUR0801

Error Message

AUR0801: "& self" binding behavior only supports listener binding via trigger/capture command.

Description

This error occurs when the & self binding behavior is applied to a binding expression that is not an event listener created with the .trigger or .capture binding commands.

Cause

The & self binding behavior is specifically designed to modify the behavior of event listeners. Its purpose is to prevent the event listener from being invoked if the event originated from a descendant element rather than the element the listener is attached to directly.

Applying & self to other types of bindings, such as property bindings (.bind, .to-view, .from-view), interpolation (${}), or other binding commands, is invalid because the concept of checking the event target against the current element doesn't apply in those contexts.

Solution

1. Apply Only to Event Listeners: Ensure that the & self binding behavior is only used in conjunction with the .trigger or .capture binding commands.

2. Remove from Other Bindings: If you have applied & self to a non-event binding, remove it. It serves no purpose there and causes this error.

Example

<!-- Incorrect: Applying & self to .bind -->
<input value.bind="message & self">

<!-- Incorrect: Applying & self to interpolation -->
<p>Value: ${count & self}</p>

<!-- Correct: Applying & self to .trigger -->
<div click.trigger="handleClick() & self">
  <button>Click Me</button> <!-- handleClick will NOT run if this button is clicked -->
  Clicking here directly will run handleClick.
</div>

<!-- Correct: Applying & self to .capture -->
<div focus.capture="handleFocus() & self">
  <input> <!-- handleFocus will NOT run if this input receives focus -->
</div>

// View Model
import { customElement } from 'aurelia';

@customElement({ /* ... */ })
export class MyComponent {
  message = 'Hello';
  count = 0;

  handleClick() {
    console.log('Div clicked directly');
  }

  handleFocus() {
    console.log('Div captured focus directly');
  }
}

Debugging Tips

• Carefully review the binding expression where the error occurs.

• Verify that the binding command used immediately before the & self behavior is either .trigger or .capture.

• If you intended to check the source of an event, ensure you are using an appropriate event binding command.