AUR9993

Error Message

AUR9993: "& updateTrigger" binding behavior only works with the default implementation of Aurelia HTML observation. Implement your own node observation + updateTrigger

Description

This error occurs when the updateTrigger binding behavior (& updateTrigger:'event1'...'eventN') is used on a binding where the underlying observation mechanism does not support the standard event handling required by updateTrigger. The updateTrigger behavior relies on specific capabilities provided by Aurelia's default observation strategies for HTML elements to listen for DOM events and trigger updates.

Cause

The primary cause is using & updateTrigger in conjunction with a custom observation strategy or a binding scenario where Aurelia's default HTML observer is not employed or cannot provide the necessary event handling integration. This is relatively uncommon in standard application development but might occur if:

1. Custom Observation: You have implemented or are using a custom element or attribute with a bespoke observation mechanism that doesn't align with the internal requirements of the updateTrigger behavior.

2. Unsupported Element/Property Combination: In rare cases, the specific combination of element and property being bound might use an internal observation strategy that isn't compatible with updateTrigger. (This is less likely for standard HTML elements and properties).

The updateTrigger behavior needs to interact with an observer that can handle event listener management (specifically, an observer marked internally as $needsHandler: true). If the observer lacks this capability, the error is thrown.

Solution

1. Use Default Observation: If possible, refactor the binding or component to use Aurelia's standard HTML observation mechanisms, which are compatible with updateTrigger. This usually means binding directly to standard HTML element properties like value, checked, etc.

2. Implement Custom Update Logic: If standard observation is not feasible or desirable, you must implement the update-on-event logic manually. Instead of using & updateTrigger, create event listeners (.trigger or .delegate) that call methods on your view model. These methods can then read the target property's value and update the source property accordingly.

3. Re-evaluate Need for updateTrigger: Consider if updateTrigger is strictly necessary. For many standard two-way bindings (.two-way or default for inputs), Aurelia already updates the view model based on the appropriate default events (input, change, etc.). updateTrigger is mainly for changing which events trigger the update.

Example

<!-- Standard usage (Correct, assumes default observation) -->
<input value.bind="firstName & updateTrigger:'blur':'paste'">

<!-- Scenario causing the error (Conceptual) -->
<!-- Assume 'my-custom-input' uses an incompatible custom observer -->
<my-custom-input data.bind="complexData & updateTrigger:'custom-update-event'">
</my-custom-input>

<!-- Solution 2: Manual update logic -->
<my-custom-input data.from-view="complexData" custom-update-event.trigger="handleCustomUpdate($event.target.data)">
</my-custom-input>

// View Model for Manual Update Logic (Solution 2)
import { customElement } from 'aurelia';

@customElement({ /* ... */ })
export class MyComponent {
  complexData: unknown;

  handleCustomUpdate(newData: unknown) {
    // Manually update the view model property when the event fires
    this.complexData = newData;
    console.log('Updated complexData on custom-update-event:', this.complexData);
  }
}

Debugging Tips

• Identify the binding where & updateTrigger is causing the error.

• Examine the type of element and property being bound. Is it a standard HTML element/property or a custom one?

• If it's a custom element/attribute, review its implementation, particularly how its properties are observed.

• Temporarily remove the & updateTrigger behavior. Does the binding work otherwise?

• Consider implementing the logic manually using event listeners (.trigger, .delegate) as shown in Solution 2 to bypass the updateTrigger mechanism if compatibility is the issue.