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

   ```html
   <!-- Incorrect -->
   <button click.trigger="doSomething() & attr">Click Me</button>
   ```
2. **Applying to Ref Bindings:** Trying to use `& attr` on `ref` bindings.

   ```html
   <!-- 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

```html
<!-- 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`, `.capture`, `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.