# 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 `.capture`) 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

```html
<!-- 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.trigger="updateWidth($event.target.clientWidth)">...</div>

```

```typescript
// 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`/`.capture`) instead of `& updateTrigger`.
* Temporarily remove `& updateTrigger` to see if a standard binding works, which helps isolate the issue to the event trigger mechanism.