Conditionals

Basic Usage

{#if}, {else if}, and {else} handle branching in templates.

{#if isEven number}
  Even
{else if isZero number}
  Zero
{else}
  Odd
{/if}

{#if isLoggedIn}
  {#if isAdmin}
    <div class="admin-panel">Admin Controls</div>
  {else}
    <div class="user-panel">User Dashboard</div>
  {/if}
{else}
  <div class="login">Please log in</div>
{/if}

Expression Syntax

Conditionals accept both semantic (lisp-like) and JavaScript expressions. Both styles can be mixed in the same template.

{#if isEqual a b}
  A is B
{/if}

{#if a === b}
  A is B
{/if}

Using Helpers

Template helpers provide readable alternatives to JavaScript operators. See Comparison Helpers for the full list.

{#if hasAny items}
  Has items
{/if}

{#if not isEven number}
  Odd
{else}
  Even
{/if}

The same logic without helpers:

{#if items.length > 0}
  Has items
{/if}

{#if !isEven(number)}
  Odd
{else}
  Even
{/if}

Conditionals in Attributes

Conditional blocks and ternary expressions work inside attribute values, not just around elements.

Conditional Classes

<div class="{#if isActive}active{/if}">
  Content
</div>

<li class="{#if selectedItem === id}selected{/if}">
  {title}
</li>

Ternary in Attributes

<div class="{isActive ? 'active' : 'inactive'}">
  Status
</div>