# AUR0721

### **Error message**

Usage of $bindables is only allowed on custom element. Encountered: `<{{0}} {{1}}="{{2}}">`

### **Parameters**

1. `elementName`: The name of the standard HTML element where `$bindables` was used.
2. `attributeName`: The full attribute syntax used (e.g., `$bindables` or `$bindables.bind`).
3. `attributeValue`: The value assigned to the `$bindables` attribute.

### Error explanation

This error occurs during template compilation when the attribute named `$bindables` is used on a standard HTML element (like `<div>`, `<span>`, `<input>`, etc.) instead of an Aurelia custom element. The `$bindables` attribute, typically used with a binding command (e.g., `$bindables.bind="obj"`), is specifically designed to spread properties from an object onto the defined `@bindable` properties of an Aurelia custom element. It has no meaning and is not allowed on standard HTML elements.

Note: This is distinct from the general spread syntax `...attribute` which is also reserved. This error specifically relates to the attribute named `$bindables`.

### Common causes

* Accidentally adding the `$bindables` attribute (often with `.bind`) to a regular HTML tag instead of a custom element tag.
* Mistaking a standard HTML element for a custom element when intending to use property spreading.

### How to fix

* Remove the `$bindables` attribute from the standard HTML element.
* If you intend to spread properties onto a component, ensure the target element is a registered custom element. The correct syntax for spreading bindables is `...$bindables.bind="expression"` or simply `...$bindables="objectLiteral"`.
* If you want to bind multiple standard HTML attributes to a regular element, bind them individually (e.g., `id.bind`, `value.bind`, `class.bind`).

### Example of Incorrect Usage:

```html
<!-- Error: $bindables attribute used on a standard <div> element -->
<div $bindables.bind="myDivProperties"></div>
```

### Example of Correct Usage (on a Custom Element):

```html
<!-- my-element.html -->
<template>...</template>
```

```typescript
// my-element.ts
import { customElement, bindable } from 'aurelia';

@customElement({ name: 'my-element', template: `...` })
export class MyElement {
  @bindable prop1: string;
  @bindable prop2: number;
}

// some-other-component.ts
export class SomeOtherComponent {
  elementProperties = { prop1: 'hello', prop2: 123 };
}
```

```html
<!-- some-other-component.html -->
<import from="./my-element"></import>

<!-- Correct: Spreading bindables using ...$bindables -->
<my-element ...$bindables.bind="elementProperties"></my-element>

<!-- Also Correct: Spreading from an object literal -->
<my-element ...$bindables="{ prop1: 'Static Value', prop2: 456 }"></my-element>
```