AUR0805

Error Message

AUR0805: Invalid scope behavior "<value>" on <au-compose />. Only "scoped" or "auto" allowed.

Where <value> is the invalid value provided to the scope-behavior attribute.

Description

This error occurs when using the <au-compose> element and providing an invalid value for the scope-behavior bindable attribute. This attribute controls how the binding context (scope) is passed to the composed component or template.

Cause

The error is caused by setting the scope-behavior attribute on an <au-compose> element to a string value other than the two allowed options:

• 'auto' (Default): The composed component inherits the outer scope (the scope of the template where <au-compose> is used).

• 'scoped': The composed component receives a new scope, with the bindingContext of <au-compose> becoming the $parent scope for the composed component. The scope property of <au-compose> (if provided) is used as the binding context for the composed component.

Providing any other string (e.g., 'inherit', 'none', a typo) will result in this error.

Solution

1. Use Valid Values: Ensure the value provided to the scope-behavior attribute is either the string 'auto' or the string 'scoped'.

2. Check Binding: If scope-behavior is dynamically bound (e.g., scope-behavior.bind="myScopeSetting"), ensure the view model property (myScopeSetting) always resolves to either 'auto' or 'scoped'.

3. Use Default: If you want the default behavior ('auto'), you can simply omit the scope-behavior attribute.

Example

<!-- Assume 'my-component' is a registered component -->
<!-- Assume 'currentScope' and 'componentViewModel' are properties on the parent view model -->

<!-- Incorrect: 'inherit' is not a valid value -->
<au-compose component="my-component" scope-behavior="inherit"></au-compose>

<!-- Incorrect: Typo -->
<au-compose component="my-component" scope-behavior="scped"></au-compose>

<!-- Correct: Explicitly using the default 'auto' behavior -->
<au-compose component="my-component" scope-behavior="auto"></au-compose>

<!-- Correct: Using 'scoped' behavior -->
<!-- 'my-component' will have 'componentViewModel' as its binding context -->
<!-- The parent scope will be available as $parent inside 'my-component' -->
<au-compose component="my-component"
                  scope.bind="componentViewModel"
                  scope-behavior="scoped">
</au-compose>

<!-- Correct: Omitting the attribute uses the default 'auto' -->
<au-compose component="my-component" model.bind="componentViewModel"></au-compose>

// Parent View Model
import { customElement } from 'aurelia';

@customElement({ /* ... */ })
export class ParentComponent {
  componentViewModel = { message: 'Data for composed component' };
  // Example for dynamic binding (ensure it's 'auto' or 'scoped')
  scopeSetting: 'auto' | 'scoped' = 'scoped';
}

// Composed Component View Model (my-component.ts)
import { bindable, customElement } from 'aurelia';

@customElement({ name: 'my-component', template: `<p>\${message} | Parent: \${$parent?.constructor.name}</p>` })
export class MyComponent {
  @bindable message: string;
}

Debugging Tips

• Verify the spelling of the value passed to scope-behavior in your template. Remember it's case-sensitive.

• If the value is bound, log the value of the corresponding view model property right before <au-compose> renders.

• Consult the <au-compose> documentation for a clearer understanding of how 'auto' and 'scoped' behaviors affect the binding context.