# AUR0707

### **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:

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

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

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

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

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

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

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