AUR0803

Error Message

AUR0803: "& updateTrigger" invalid usage. This binding behavior can only be applied to two-way/ from-view bindings.

Description

This error occurs when the & updateTrigger binding behavior is applied to a binding expression that is not a two-way (.bind) or from-view (.from-view) binding.

Cause

The & updateTrigger binding behavior modifies when the view model is updated based on changes in the view (specifically, by listening to DOM events on the target element). This concept only applies to bindings that transfer data from the view to the view model.

These binding types are:

• Two-way (.bind): Data flows in both directions (view-to-model and model-to-view).

• From-view (.from-view): Data flows only from the view to the model.

Applying & updateTrigger to other binding types, such as:

• One-way (.to-view)

• One-time (.one-time)

• String interpolation (${})

• Event bindings (.trigger, .capture)

• Reference bindings (ref) is invalid because these bindings do not inherently update the view model based on view changes, rendering the updateTrigger behavior meaningless in these contexts.

Solution

1. Apply Only to .bind or .from-view: Ensure that & updateTrigger is only used with the .bind or .from-view binding commands.

2. Remove from Other Bindings: If & updateTrigger has been applied to an incompatible binding type, remove it.

3. Choose Correct Binding Mode: If you intended to update the view model based on view events, ensure you are using .bind or .from-view as the binding command.

Example

<!-- Incorrect: Applying updateTrigger to .to-view -->
<span textcontent.to-view="statusMessage & updateTrigger:'mousemove'"></span>

<!-- Incorrect: Applying updateTrigger to .one-time -->
<img src.one-time="imageUrl & updateTrigger:'load'">

<!-- Incorrect: Applying updateTrigger to .trigger -->
<button click.trigger="save() & updateTrigger:'mousedown'">Save</button>

<!-- Correct: Applying updateTrigger to .bind -->
<input type="text" value.bind="username & updateTrigger:'blur'">

<!-- Correct: Applying updateTrigger to .from-view -->
<select value.from-view="selectedOption & updateTrigger:'change'">
  <!-- options -->
</select>

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

@customElement({ /* ... */ })
export class MyComponent {
  statusMessage = 'Ready';
  imageUrl = 'logo.png';
  username = 'user';
  selectedOption = '';

  save() { /* ... */ }
}

Debugging Tips

• Check the binding command used immediately before the property name in the binding expression (e.g., value.bind, textcontent.to-view).

• Ensure the command is either .bind or .from-view when using & updateTrigger.

• Review why you added & updateTrigger to the binding. If it wasn't intended for a two-way or from-view scenario, it's likely unnecessary.