AUR0810

Error Message

AUR0810: Invalid [else] usage, it should follow an [if]

Description

This error occurs during template linking when an else attribute cannot link to a valid preceding if or else if controller. Conditional branches are an adjacent authoring construct: place each else directly after the branch it continues.

Cause

1. Incorrect Placement: The element with the else attribute is not placed immediately after the corresponding if.bind or else if branch. Another controller-bearing structure between branches breaks the chain.

2. Missing if.bind: The preceding element, which was intended to be the start of the conditional block, is missing the if.bind attribute.

3. Invalid else if Structure: else if must keep else and if.bind adjacent on the same element. Plain attributes or non-template-controller custom attributes may appear between them. Another template controller means the attributes do not form an else if branch.

4. Template Manipulation: Manual manipulation of the DOM or compiled template structure before or during linking might disrupt the expected if/else sequence.

5. Syntax Error: A simple typo or syntax error in the template might lead to the else being misinterpreted or misplaced relative to the if.

Solution

1. Verify Placement: Ensure the element with the else attribute is the immediate sibling following the element with if.bind or a preceding else if branch. Remove any intervening elements that break the chain.

2. Add if.bind: If the preceding element is missing if.bind, add it with the appropriate condition.

3. Check else if Syntax: If you want an else if branch, put adjacent else and if.bind attributes on the same element.

4. Check Template Structure: Review the HTML template carefully around the if/else block for any structural issues or typos.

Example

<!-- Correct Structure -->
<div if.bind="condition">Show if true</div>
<div else>Show if false</div>

<!-- Correct: else-if chain -->
<div if.bind="step === 0">A</div>
<div else if.bind="step === 1">B</div>
<div else>C</div>

<!-- Correct: plain or non-template custom attributes may appear between else and if.bind -->
<div if.bind="step === 0">A</div>
<div else class="branch" if.bind="step === 1">B</div>

<!-- Incorrect: Intervening template controller -->
<div if.bind="condition">Show if true</div>
<p repeat.for="item of items">${item}</p>
<div else>Show if false</div> <!-- AUR0810 Error -->

<!-- Incorrect: Missing if.bind on the first div -->
<div>Show if true?</div> <!-- Missing if.bind -->
<div else>Show if false</div> <!-- AUR0810 Error -->

<!-- Incorrect: else not immediately following -->
<template>
  <div if.bind="condition">Show if true</div>
</template>
<!-- Some other unrelated element or structure -->
<div else>Show if false</div> <!-- AUR0810 Error: 'else' is not linked to the 'if' -->

<!-- Unsupported as else-if: another template controller separates the attributes -->
<div if.bind="step === 0">A</div>
<div else repeat.for="item of items" if.bind="step === 1">B</div>

Debugging Tips

• Inspect the source template around the if and else elements. Pay close attention to the direct sibling relationship.

• Verify the branch order in the source template. Template controllers compile into nested controller views, so the rendered DOM is not a reliable representation of the original branch relationship.

• Temporarily remove the else block and confirm that the if branch works on its own.

• Simplify the branch content to rule out another template controller changing the structure.