#with : Context Switching Helper

Summary

Change the data context to a specific object, simplifying property access within the block. Properties can be accessed directly without the object prefix.

Based on: <template> element with context binding and the With component

Syntax

  <!-- Properties accessed directly -->

  <!-- Optional fallback if object is null -->

With Alias:

  <!-- Use alias to reference the object -->

Parameters

Special Variables

Examples

Basic Context Switching

  <h2></h2>
  <p>Email: </p>
  <p>Age: </p>

Data:

doc.Params["model"] = new {
    user = new {
        name = "John Doe",
        email = "john@example.com",
        age = 30
    }
};

Output:

<h2>John Doe</h2>
<p>Email: john@example.com</p>
<p>Age: 30</p>

With Else Block

  <div class="user-profile">
    <h2></h2>
  </div>

  <div class="no-user">
    <p>No user profile available</p>
  </div>

Accessing Parent Properties

<h1>Order #</h1>


  <div class="customer">
    <h2>Customer: </h2>
    <p>Order Number: </p>
  </div>

Using Alias Syntax

  <div>
    <p>Logged in as: </p>
    <p>Role: </p>
  </div>

Nested With Blocks

  <h1></h1>

  
    <address>
      <br>
      ,  <br>
      Company: 
    </address>
  

Underlying Implementation

The `` helper compiles to the following Scryber template structure:

<template data-bind="">
  <!-- Main content with direct property access -->
  <template data-visible="false">
    <!-- Optional else content if object is null -->
  </template>
</template>

For the alias syntax ``, it creates a variable binding that makes the object available under the specified name.

Notes

• Empty/null objects trigger the `` block
• Use `` to reference the entire context object
• Use `` to go up one level
• Use `` to go up two levels
• Alias names must be valid identifiers
• Context switching simplifies deeply nested property access

See Also

• #each Helper
• #if Helper
• Context & Scope Guide