AUR0721

Usage of $bindables attribute is only allowed on custom elements.

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:

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

Example of Correct Usage (on a Custom Element):

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

// 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 };
}

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