AUR0707

Template compilation error: creating binding to non-bindable property yyyy on zzzz.

Error message

Template compilation error: creating binding to non-bindable property {{0}} on {{1}}.

Parameters

1. propertyName: The name of the property that is not defined as bindable.

2. attributeName: The name of the custom attribute where the binding was attempted.

Error explanation

This error occurs during template compilation when you try to bind a property within a multi-binding custom attribute, but that property is not declared as @bindable in the custom attribute's view model class.

Multi-binding syntax allows binding multiple properties of a custom attribute in a single attribute declaration, like this: <div my-attribute="propA.bind: valueA; propB: valueB"></div>

For this to work, both propA and propB must be declared as @bindable properties within the MyAttributeCustomAttribute class. If either propA or propB is missing the @bindable decorator (or is not defined at all), this error will be thrown for the non-bindable property.

Common causes

• Forgetting to add the @bindable decorator to a property in the custom attribute's view model class that you are trying to bind using multi-binding syntax.

• A typo in the property name within the multi-binding attribute string (e.g., proA.bind: ... instead of propA.bind: ...).

How to fix

• Ensure that every property you intend to bind within a multi-binding attribute string is decorated with @bindable in the corresponding custom attribute's view model.

• Double-check the spelling of property names in the multi-binding attribute string.

Example of Incorrect Usage:

// my-attribute.ts
import { bindable } from 'aurelia';

export class MyAttributeCustomAttribute {
  @bindable propA: string;
  // propB is missing @bindable
  propB: string;
}

<!-- usage.html -->
<import from="./my-attribute"></import>

<!-- Error: propB is not bindable on MyAttributeCustomAttribute -->
<div my-attribute="propA.bind: valueA; propB: valueB"></div>

Example of Correct Usage:

// my-attribute.ts
import { bindable } from 'aurelia';

export class MyAttributeCustomAttribute {
  @bindable propA: string;
  @bindable propB: string; // Added @bindable
}

<!-- usage.html -->
<import from="./my-attribute"></import>

<!-- Correct: Both propA and propB are bindable -->
<div my-attribute="propA.bind: valueA; propB: valueB"></div>