Skip to main content Link Search Menu Expand Document (external link)

#if : Conditional Rendering Helper

On this page

Summary

Conditionally render content based on expressions. Supports multiple branches with and.

Based on: <choose>, <when>, and <otherwise> elements for conditional template rendering

Syntax 


  <!-- Rendered if condition is true -->

  <!-- Rendered if condition2 is true -->

  <!-- Rendered if all conditions are false -->

Parameters

Parameter Type Required Description
condition Expression Yes Expression that evaluates to true/false

Supported Operators

Operator Description Example
== Equality model.status == 'active'
!= Inequality model.count != 0
< Less than model.age < 18
<= Less than or equal model.score <= 100
> Greater than model.value > 0
>= Greater than or equal model.age >= 18
&& Logical AND model.age >= 18 && model.hasLicense
|| Logical OR model.isAdmin || model.isModerator

Examples

Simple Condition 


  <span class="badge-active">Active</span>

If-Else 


  <button>Add to Cart</button>

  <span class="out-of-stock">Out of Stock</span>

Multiple Conditions 


  <span class="grade-a">Excellent (A)</span>

  <span class="grade-b">Good (B)</span>

  <span class="grade-c">Average (C)</span>

  <span class="grade-f">Needs Improvement (F)</span>

Comparison Operators 

<!-- Equality -->

  <span>✓ Approved</span>


<!-- Greater than or equal -->

  <p class="pass">Passed</p>


<!-- Less than -->

  <p class="alert">Low stock warning!</p>

Logical Operators 

<!-- AND (&&) -->

  <p>Eligible to drive</p>

  <p>Not eligible to drive</p>


<!-- OR (||) -->

  <div class="admin-panel">
    <h2>Administration</h2>
  </div>

With #each Context 


  <div class="user">
    <h3></h3>

    
      <span class="badge-admin">Administrator</span>
    
      <span class="badge-mod">Moderator</span>
    
      <span class="badge-user">User</span>
    
  </div>

Underlying Implementation

The `` helper compiles to Scryber’s conditional rendering elements:

<choose>
  <when data-test="">
    <!-- Content when true -->
  </when>
  <when data-test="">
    <!-- Content for else if -->
  </when>
  <otherwise>
    <!-- Content for else -->
  </otherwise>
</choose>

This structure allows Scryber to evaluate conditions at databinding time and only render the matching branch.

Notes

  • Expressions are evaluated at databinding time
  • Falsy values: false, null, 0, empty string
  • Truthy values: everything else
  • Use parentheses for complex expressions: (a && b) || c
  • Cannot use ! (NOT) operator - use != or reverse logic instead
  • Multiple `` branches are supported
  • Only one branch is rendered in the output

See Also