AUR9992

Error Message

AUR9992: "& updateTrigger" uses node observer to observe, but it does not know how to use events to observe property <<element>@<property> />

Where <element> is the tag name of the element and <property> is the name of the property being bound.

Description

This error occurs when the updateTrigger binding behavior (& updateTrigger:'event1'...'eventN') is applied to a binding, but Aurelia's built-in observation system does not know which DOM event(s) correspond to changes for the specified property on the target HTML element. The updateTrigger behavior fundamentally works by attaching event listeners to the element; if the system doesn't have a predefined event mapping for the target property, it cannot attach the correct listeners.

Cause

The core issue is attempting to use & updateTrigger on an element/property combination for which Aurelia lacks a default event-based observation strategy. This can happen when:

1. Binding to Non-Standard Properties: You are binding to a less common DOM property (e.g., a custom property added by a library, or a standard but rarely observed property like clientWidth) and trying to use updateTrigger. Aurelia only has built-in event mappings for commonly bound properties like value, checked, scrollTop, scrollLeft, etc.

2. Binding to Custom Element Properties: You are binding to a property of a custom element, and while the property might be observable, Aurelia doesn't automatically know which DOM events signal changes to that property for the purpose of updateTrigger.

3. Typo in Property Name: A simple typo in the property name might lead Aurelia to look for an observation strategy for a non-existent property.

Solution

1. Use Standard Observable Properties: Whenever possible, bind to standard HTML element properties for which Aurelia has built-in observation and event mappings (like value, checked, selected, scrollTop, scrollLeft).

2. Implement Manual Update Logic: If you need to update your view model based on events related to a non-standard or custom property, use explicit event bindings (.trigger or .delegate) instead of & updateTrigger. Call a view model method from the event handler to read the necessary value from the element and update your view model property.

3. Configure Custom Observation (Advanced): For custom elements or scenarios where you consistently need event-based observation for a specific property, you could potentially extend Aurelia's NodeObserverLocator with a custom strategy, but this is an advanced technique and usually unnecessary. Manual update logic (Solution 2) is often simpler.

4. Check for Typos: Ensure the property name in your binding is spelled correctly.

Example

<!-- Correct: updateTrigger works for standard 'value' on input -->
<input value.bind="userName & updateTrigger:'blur'">

<!-- Incorrect: Assuming 'data-custom-val' is a property Aurelia doesn't know how to observe via events -->
<div data-custom-val.bind="myData & updateTrigger:'some-event'">...</div>

<!-- Solution 2: Manual update for non-standard property/event -->
<div data-custom-val.from-view="myData" some-event.trigger="updateMyData($event.target.dataset.customVal)">...</div>

<!-- Incorrect: Binding to a read-only property like clientWidth with updateTrigger -->
<div client-width.bind="divWidth & updateTrigger:'resize'">...</div> <!-- Makes little sense, clientWidth isn't set by events -->

<!-- Solution 2 (Conceptual): Update based on relevant event -->
<div resize.delegate="updateWidth($event.target.clientWidth)">...</div>

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

@customElement({ /* ... */ })
export class MyComponent {
  myData: string = '';
  divWidth: number = 0;

  updateMyData(newValue: string) {
    this.myData = newValue;
    console.log('Updated myData:', this.myData);
  }

  updateWidth(newWidth: number) {
    this.divWidth = newWidth;
    console.log('Updated width:', this.divWidth);
    // Note: Listening to 'resize' on a div might require specific setup or using window resize.
  }
}

Debugging Tips

• Verify the exact property name being bound. Is it a standard DOM property known to be observable via events in Aurelia (like value, checked)?

• Check if the property is read-only (like clientWidth, offsetHeight). updateTrigger is for properties that change based on user interaction or other events that modify the element's state in a way that should update the view model.

• Consider if the goal can be achieved using standard two-way binding or one-way binding combined with explicit event listeners (.trigger/.delegate) instead of & updateTrigger.

• Temporarily remove & updateTrigger to see if a standard binding works, which helps isolate the issue to the event trigger mechanism.