# AUR0108

## Error Message

`AUR0108: Ast eval error: unknown binary operator: "<operator>"`

Where `<operator>` is the specific operator encountered in the expression.

## Description

This error occurs during the evaluation of a binding expression when the parser encounters a binary operator (an operator that works on two operands, like `a + b`) that it does not recognize or support.

## Cause

The most common causes are:

1. **Typo in Operator:** A standard binary operator was mistyped (e.g., `== =` instead of `===`, `&` instead of `&&`).
2. **Unsupported Operator:** An attempt was made to use a valid JavaScript binary operator that is not supported within Aurelia's binding expression syntax (e.g., bitwise operators like `&`, `|`, `^`, or operators like the comma operator `,` used in an unsupported way).
3. **Parser Error:** A malformed expression might cause the parser to misinterpret parts of the expression as an unknown operator.

Aurelia's binding language supports common JavaScript binary operators, including:

* Arithmetic: `+`, `-`, `*`, `/`, `%`
* Logical: `&&`, `||`, `??` (Nullish Coalescing)
* Comparison: `==`, `!=`, `===`, `!==`, `<`, `>`, `<=`, `>=`
* Assignment-related (in specific contexts like `.trigger`): `=`, but generally full assignments are handled differently.
* String concatenation: `+`
* `instanceof`, `in`

## Solution

1. **Check for Typos:** Carefully review the binary operator used in the binding expression and correct any typos.
2. **Use Supported Operators:** Ensure you are using only binary operators supported by Aurelia's binding syntax.
3. **Refactor Logic:** If you need the functionality of an unsupported operator (like bitwise operations), perform the calculation in your view model or use a value converter.
4. **Verify Expression Syntax:** Check the overall structure of the binding expression for any syntax errors that might confuse the parser.

## Example

```html
<!-- Incorrect: Typo, extra '=' -->
<div if.bind="status === = 'active'">Active</div>

<!-- Incorrect: Using unsupported bitwise AND operator (&) -->
<p>Flags: ${ userFlags & adminFlag }</p>

<!-- Incorrect: Using comma operator likely in an unsupported way -->
<!-- <p>${ value = 1, value + 1 }</p> -->

<!-- Correct: Using supported operators -->
<div if.bind="status === 'active'">Active</div>
<p if.bind="count > 0 && isValid">Show</p>

<!-- Correct: Perform complex/unsupported operations in VM or converter -->
<p>Flags Check: ${ userFlags | hasFlag:adminFlag }</p>
```

```typescript
// View Model Example for unsupported operator
import { customElement } from 'aurelia';

// Example Value Converter for bitwise AND check
export class HasFlagValueConverter {
  toView(value: number, flag: number): boolean {
    return (value & flag) === flag;
  }
}

@customElement({
  // ... dependencies: [HasFlagValueConverter]
})
export class MyComponent {
  status = 'active';
  count = 1;
  isValid = true;
  userFlags = 5; // Example flags (binary 101)
  adminFlag = 4; // Example flag to check (binary 100)
}
```

## Debugging Tips

* Examine the exact operator reported in the error message within your binding expression.
* Compare the operator against the list of supported JavaScript operators commonly allowed in Aurelia bindings.
* Simplify the expression to isolate the problematic part.
* Consider using a value converter or moving the logic to the view model if the operation isn't directly supported in the template syntax.