AUR9994

Error Message

AUR9994: "& attr" can be only used on property binding. It's used on <BindingConstructorName>

Where <BindingConstructorName> is the constructor name of the specific binding class instance it was incorrectly applied to.

Description

This error occurs when the attr binding behavior (used syntactically as & attr) is applied to a type of binding other than a standard property binding (like value.bind, src.bind, etc.). The purpose of & attr is specifically to change the target of a property binding from a DOM property to an HTML attribute.

Cause

The direct cause is applying & attr to an inappropriate binding type. This usually happens when:

1. Applying to Listener Bindings: Trying to use & attr on event listener bindings like click.trigger or input.delegate.

   <!-- Incorrect -->
   <button click.trigger="doSomething() & attr">Click Me</button>

2. Applying to Ref Bindings: Trying to use & attr on ref bindings.

   <!-- Incorrect -->
   <div ref="myDiv & attr"></div>

3. Applying to Other Non-Property Bindings: Attempting to use it with other binding commands or syntax that doesn't resolve to a direct property assignment binding.

The & attr behavior only makes sense in the context of bindings that would normally target a DOM property, such as:

• value.bind="firstName & attr" (targets the value attribute instead of the value property)

• xlink:href.bind="url & attr" (targets the xlink:href attribute)

• aria-label.bind="label & attr" (targets the aria-label attribute)

Solution

Remove the & attr behavior from any binding that is not a property binding. If you need to manipulate attributes in response to events or other non-property-binding scenarios, you should typically do so using direct DOM manipulation within your view model or component logic, or by binding relevant view model properties to the attributes using standard property bindings (potentially with & attr if needed to force attribute targeting).

Example

<!-- Incorrect: Applied to a trigger binding -->
<button click.trigger="save() & attr">Save</button>

<!-- Correct: Remove & attr from non-property binding -->
<button click.trigger="save()">Save</button>

<!-- Incorrect: Applied to a ref binding -->
<input ref="emailInput & attr" type="email">

<!-- Correct: Remove & attr from non-property binding -->
<input ref="emailInput" type="email">

<!-- Correct Usage: Forcing 'value' binding to target the attribute -->
<input value.bind="query & attr">

<!-- Correct Usage: Binding to a standard attribute like 'aria-label' -->
<!-- Note: & attr is often unnecessary here as Aurelia typically targets attributes like aria-* correctly -->
<div aria-label.bind="computedLabel & attr">Info</div>

Debugging Tips

• Inspect the binding expression where the & attr behavior is used.

• Identify the type of binding command being used (e.g., .bind, .trigger, .delegate, ref).

• If the command is not .bind (or implicitly .bind via interpolation ${}), remove the & attr.

• If the command is .bind, ensure the target (the part before .bind) corresponds to a standard DOM property that you intend to target as an attribute instead.

</rewritten_file>