Skip to main content Link Search Menu Expand Document Toggle dark mode Copy Code (external link)

else : Fallback Branch Helper

Provides a fallback branch when conditional expressions are false or when collections are empty.

On this page

Syntax

With {{#if}}:

{{#if condition}}
  <!-- Content when true -->
{{else}}
  <!-- Content when false -->
{{/if}}

With {{#each}}:

{{#each collection}}
  <!-- Content for each item -->
{{else}}
  <!-- Content when collection is empty -->
{{/each}}

With {{#with}}:

{{#with object}}
  <!-- Content when object exists -->
{{else}}
  <!-- Content when object is null -->
{{/with}}

Parameters

No parameters. The {{else}} helper is used as a separator within block helpers.

Examples

With If Statement

{{#if model.hasStock}}
  <button class="btn-primary">Add to Cart</button>
{{else}}
  <button class="btn-disabled" disabled>Out of Stock</button>
{{/if}}

Data:

doc.Params["model"] = new {
    hasStock = false
};

Output:

<button class="btn-disabled" disabled>Out of Stock</button>

With Each Loop (Empty Collection)

<ul>
{{#each model.items}}
  <li>{{this.name}}</li>
{{else}}
  <li class="empty">No items available</li>
{{/each}}
</ul>

Data:

doc.Params["model"] = new {
    items = new object[] { }  // Empty array
};

Output:

<ul>
  <li class="empty">No items available</li>
</ul>

With Context Switch (Null Object)

{{#with model.user}}
  <div class="user-profile">
    <h2>{{name}}</h2>
    <p>{{email}}</p>
  </div>
{{else}}
  <div class="no-profile">
    <p>User profile not available</p>
  </div>
{{/with}}

Data:

doc.Params["model"] = new {
    user = (object)null
};

Output:

<div class="no-profile">
  <p>User profile not available</p>
</div>

Multiple Else If with Final Else

{{#if model.grade >= 90}}
  <span class="a">A - Excellent</span>
{{else if model.grade >= 80}}
  <span class="b">B - Good</span>
{{else if model.grade >= 70}}
  <span class="c">C - Average</span>
{{else}}
  <span class="f">F - Needs Improvement</span>
{{/if}}

Underlying Implementation

In {{#if}} blocks, {{else}} compiles to:

<choose>
  <when data-test="{{condition}}">
    <!-- If content -->
  </when>
  <otherwise>
    <!-- Else content -->
  </otherwise>
</choose>

In {{#each}} blocks, {{else}} creates a conditional wrapper:

<template data-bind="{{collection}}">
  <!-- Each content -->
</template>
<template data-test="count({{collection}}) == 0">
  <!-- Else content shown when empty -->
</template>

Notes

  • Can be used with {{#if}}, {{#each}}, and {{#with}}
  • Only one {{else}} block allowed per helper (use {{else if}} for multiple conditions)
  • For {{#if}}, the else block renders when all conditions are false
  • For {{#each}}, the else block renders when the collection is empty
  • For {{#with}}, the else block renders when the object is null or undefined
  • Position matters: must come after all {{else if}} blocks

See Also