Lesson 06 of 10

Conditionals

Show or hide content based on your data. Master {{#if}}, {{else}}, and {{#unless}} to build dynamic pages that adapt to different states.

In This Lesson

  1. Basic {{#if}}
  2. If / Else
  3. {{#unless}} — Inverse Conditional
  4. Truthy & Falsy Values
  5. Common Patterns
  6. Checkpoint

Basic {{#if}}

Show content only when a variable is truthy:

Basic If .orb 
<script data>
({
  showBanner: true,
  announcement: "Version 1.2 is out! 🎉"
})
</script>

{{#if showBanner}}
  <div class="banner">
    {{ announcement }}
  </div>
{{/if}}

Since showBanner is true, the banner is rendered. Set it to false and the banner disappears entirely from the HTML output.

Version 1.2 is out! 🎉

If / Else

Add an {{else}} branch for when the condition is falsy:

If / Else .orb 
<script data>
({
  loggedIn: false,
  username: "Dan"
})
</script>

{{#if loggedIn}}
  <p>Welcome back, {{ username }}!</p>
  <button>Logout</button>
{{else}}
  <p>Please sign in to continue.</p>
  <button>Login</button>
{{/if}}

Since loggedIn is false, the else branch renders:

Please sign in to continue.

{{#unless}} — Inverse Conditional

{{#unless}} is the opposite of {{#if}} — it renders when the variable is falsy.

Unless Block .orb 
<script data>
({
  hideFooter: false
})
</script>

{{#unless hideFooter}}
  <footer>
    <p>This footer appears because hideFooter is false.</p>
  </footer>
{{/unless}}
📐

When to use {{#unless}}: It's cleaner than {{#if}} + negation. Use it when you want "show this unless X is true".

Less Readable ❌ .orb 
<!-- Confusing double-negative -->
{{#if showFooter}}
  <footer>...</footer>
{{/if}}
More Readable ✅ .orb 
<!-- Clear intent -->
{{#unless hideFooter}}
  <footer>...</footer>
{{/unless}}

Truthy & Falsy Values

OrbLayout follows JavaScript's truthy/falsy rules:

ValueResult{{#if}} renders?
trueTruthy✅ Yes
"hello"Truthy✅ Yes
42Truthy✅ Yes
"true"Truthy✅ Yes
falseFalsy❌ No
"" (empty string)Falsy❌ No
0Falsy❌ No
nullFalsy❌ No
undefinedFalsy❌ No
⚠️

Note: If a variable doesn't exist in your data block, it's undefined (falsy). So {{#if missingVar}} won't render.

Common Patterns

Toggle components

Conditional Components .orb 
{{#if showHero}}
  <use component="hero" heading="Welcome!" />
{{/if}}

Conditionals inside loops

If Inside Each .orb 
<script data>
({
  products: [
    { name: "Widget", price: 9.99, onSale: true },
    { name: "Gadget", price: 24.99, onSale: false },
    { name: "Doohickey", price: 4.99, onSale: true }
  ]
})
</script>

{{#each products}}
  <div class="product">
    <h3>{{ name }}</h3>
    <p>${{ price }}</p>
    {{#if onSale}}
      <span class="sale-badge">🔥 SALE</span>
    {{/if}}
  </div>
{{/each}}

Conditional CSS classes (with loop helpers)

Dynamic Classes .orb 
{{#each items}}
  {{#if @first}}
    <div class="item first-item">{{ this }}</div>
  {{else}}
    <div class="item">{{ this }}</div>
  {{/if}}
{{/each}}

✅ Lesson 6 Checkpoint

You should now be able to:

  1. Conditionally render content with {{#if variable}}
  2. Provide fallback content with {{else}}
  3. Invert conditions with {{#unless variable}}
  4. Understand truthy vs falsy values
  5. Combine conditionals with loops and components
← Previous Loops & Iteration