AUR9998

Error Message

AUR9998: Spread binding does not support spreading custom attributes/template controllers. Did you build the spread instruction manually?

Description

This error occurs when the spread syntax (...) is used in a way that attempts to apply bindings to a target that is identified as a custom attribute or, more specifically, a template controller (like if.bind, repeat.for, with.bind, au-slot, etc.).

Spread syntax is intended to set multiple bindable properties on a custom element (e.g., <my-element ...options>) or bind multiple standard HTML attributes. It is not designed to work with custom attributes that act as template controllers or have complex behaviors beyond simple property setting.

Cause

1. Incorrect Target: You are trying to use spread syntax directly on an attribute that is a template controller or a custom attribute with complex behavior.

   • Example: <div if.bind="condition" ...settings></div> - Attempting to spread settings onto the if attribute is invalid.

2. Manual Instruction Creation (Advanced): If you are manually creating rendering instructions (a very advanced scenario, usually not done in application code), you might have incorrectly created a spread instruction targeting a template controller or custom attribute definition.

Solution

1. Target Custom Elements: Ensure spread syntax is used on custom elements to set their bindable properties, or on standard HTML elements to set standard attributes.

2. Bind Properties Individually: If you need to bind properties related to a template controller's behavior, bind them individually to the view model properties that the controller uses. You cannot spread an object directly onto the controller attribute itself.

3. Refactor Component: If you were trying to pass many options to a template controller, consider refactoring. Perhaps the logic can be moved into a custom element, which can accept spread properties.

Example

<!-- Incorrect: Spreading onto 'if.bind' (template controller) -->
<template>
  <div if.bind="show" ...layoutOptions>Content</div>
</template>

<!-- Incorrect: Spreading onto a hypothetical complex custom attribute 'my-complex-attr' -->
<template>
  <div my-complex-attr="value" ...moreOptions>Content</div>
</template>

<!-- Correct: Spreading onto a custom *element* -->
<template>
  <user-profile ...profileData></user-profile>
</template>

<!-- Correct: Binding individual properties, controller uses them -->
<template>
  <div if.bind="userIsActive && userHasPermission">...</div>
  <div repeat.for="item of items | filter:searchTerm | sort:sortOrder">...</div>
</template>

// View Model illustrating individual binds for controllers
import { customElement } from 'aurelia';
import './user-profile'; // Assume registered custom element

@customElement({ /* ... */ })
export class MyViewModel {
  // Data for spread on custom element
  profileData = { name: 'Jane', email: '[email protected]' };

  // Properties used by template controllers
  show = true;
  layoutOptions = { padding: '10px', margin: '5px' }; // Cannot spread this onto 'if'

  userIsActive = true;
  userHasPermission = false;

  items = [{id: 1, name: 'A'}, {id: 2, name: 'B'}];
  searchTerm = '';
  sortOrder = 'name';
}

Debugging Tips

• Identify the element and attribute where the spread (...) syntax is being used in your template.

• Verify if the attribute name being targeted by the spread (or the attribute immediately preceding the spread) is a template controller (if, repeat, with, replaceable, au-slot, etc.) or a custom attribute known to have complex behavior.

• Refactor the template to bind properties individually instead of using spread on that specific attribute.