Visibility & Conditionals

Visibility attributes allow you to show or hide elements based on your data values. These are essential for creating dynamic interfaces that respond to state changes.

dbind_show

Purpose: Show an element when a data value is truthy; hide it when falsy.

Syntax:

<element dbind_show="fieldName"></element>
<element dbind_show="nested.field"></element>

What is "Truthy"?

An element is shown when the value is truthy:

• true
• Non-empty strings ("hello", "yes", "active")
• Non-zero numbers (1, 42, -5)
• Non-empty arrays ([1, 2, 3])
• Non-empty objects ({ key: "value" })

An element is hidden when the value is falsy:

• false
• null
• undefined
• Empty string ""
• 0
• Empty array []

Basic Usage

<!-- Show when user is verified -->
<span class="verified-badge" dbind_show="isVerified">✓ Verified</span>

<!-- Show when item has a discount -->
<span class="discount-tag" dbind_show="hasDiscount">On Sale!</span>

<!-- Nested property check -->
<div dbind_show="user.isAdmin">Admin Controls Here</div>

Data:

{
  "isVerified": true,
  "hasDiscount": false,
  "user": {
    "isAdmin": true
  }
}

Result:

<span class="verified-badge">✓ Verified</span>
<!-- discount-tag is hidden -->
<div>Admin Controls Here</div>

Use Cases

1. Premium/Pro Features

<div class="feature-card">
  <h3 dbind_data="featureName"></h3>
  <span class="pro-badge" dbind_show="isPro">PRO</span>
  <span class="free-badge" dbind_show="isFree">FREE</span>
</div>

2. User Authentication State

<!-- Navigation items based on auth -->
<nav>
  <a href="/dashboard" dbind_show="isLoggedIn">Dashboard</a>
  <a href="/login" dbind_show="isGuest">Login</a>
  <a href="/signup" dbind_show="isGuest">Sign Up</a>
</nav>

3. Content with Warnings

<article>
  <h1 dbind_data="title"></h1>
  <div class="content-warning" dbind_show="hasContentWarning">
    <strong>Content Warning:</strong>
    <span dbind_data="contentWarningText"></span>
  </div>
  <div class="article-body" dbind_html="content"></div>
</article>

4. Optional Profile Fields

<div class="user-profile">
  <h3 dbind_data="name"></h3>
  <p dbind_show="bio" dbind_data="bio"></p>
  <a dbind_show="website" dbind_href="website">Website</a>
  <a dbind_show="twitter" dbind_href="twitter">Twitter</a>
  <a dbind_show="github" dbind_href="github">GitHub</a>
</div>

5. Stock/Availability Status

<div class="product-availability">
  <span class="in-stock" dbind_show="inStock">In Stock</span>
  <span class="low-stock" dbind_show="lowStock">Only a few left!</span>
  <span class="out-of-stock" dbind_show="outOfStock">Out of Stock</span>
</div>

Data (different scenarios):

// In stock
{ "inStock": true, "lowStock": false, "outOfStock": false }

// Low stock
{ "inStock": false, "lowStock": true, "outOfStock": false }

// Out of stock
{ "inStock": false, "lowStock": false, "outOfStock": true }

Showing Based on Array Length

<!-- Show message if user has notifications -->
<div dbind_show="notifications">
  You have new notifications
</div>

<!-- Show if cart has items -->
<span class="cart-indicator" dbind_show="cartItems">
  <span dbind_data="cartItems.length"></span> items
</span>

Data:

{
  "notifications": [{ "id": 1, "message": "New follower" }],
  "cartItems": []
}

In this example, notifications indicator shows (non-empty array), but cart indicator is hidden (empty array).

---

dbind_hide

Purpose: Hide an element when a data value is truthy; show it when falsy. This is the inverse of dbind_show.

Syntax:

<element dbind_hide="fieldName"></element>

When to Use dbind_hide vs dbind_show

Scenario	Recommendation
Show verified badge	dbind_show="isVerified"
Hide when loading	dbind_hide="isLoading"
Show when complete	dbind_show="isComplete"
Hide content during edit	dbind_hide="isEditing"

The choice often depends on code readability. Use whichever makes the intent clearer.

Basic Usage

<!-- Hide content while loading -->
<div class="main-content" dbind_hide="isLoading">
  <h1 dbind_data="title"></h1>
  <p dbind_data="description"></p>
</div>

<!-- Hide edit button when already editing -->
<button dbind_hide="isEditing">Edit</button>

Use Cases

1. Loading States

<div class="content-section">
  <!-- Hide content while loading -->
  <div class="content" dbind_hide="isLoading">
    <p dbind_data="content"></p>
  </div>

  <!-- Show loader while loading -->
  <div class="loader" dbind_show="isLoading">
    Loading...
  </div>
</div>

2. Edit Mode Toggle

<div class="profile-section">
  <!-- Display mode -->
  <div dbind_hide="isEditing">
    <h3 dbind_data="name"></h3>
    <p dbind_data="bio"></p>
    <button onclick="toggleEdit()">Edit Profile</button>
  </div>

  <!-- Edit mode -->
  <form dbind_show="isEditing">
    <input type="text" value="{{name}}" placeholder="Name">
    <textarea placeholder="Bio">{{bio}}</textarea>
    <button type="submit">Save</button>
    <button type="button" onclick="toggleEdit()">Cancel</button>
  </form>
</div>

3. Error State Handling

<div class="data-container">
  <!-- Hide data when there's an error -->
  <div class="data-display" dbind_hide="hasError">
    <p dbind_data="data"></p>
  </div>

  <!-- Show error message -->
  <div class="error-message" dbind_show="hasError">
    <p dbind_data="errorMessage"></p>
    <button>Retry</button>
  </div>
</div>

4. Disable Feature for Free Users

<div class="premium-feature">
  <!-- Hide lock for premium users -->
  <div class="feature-lock" dbind_hide="isPremium">
    <span>🔒 Premium Feature</span>
    <a href="/upgrade">Upgrade to Unlock</a>
  </div>

  <!-- Show feature for premium users -->
  <div class="feature-content" dbind_show="isPremium">
    <!-- Premium feature content -->
  </div>
</div>

---

dbind_if

Purpose: Show or hide an element based on a conditional expression with comparison operators.

Syntax:

<!-- Simple comparison -->
<element dbind_if="field==value"></element>
<element dbind_if="field!=value"></element>
<element dbind_if="field>value"></element>
<element dbind_if="field<value"></element>
<element dbind_if="field>=value"></element>
<element dbind_if="field<=value"></element>

Supported Operators

Operator	Meaning	Example
==	Equals	dbind_if="status==active"
!=	Not equals	dbind_if="role!=guest"
>	Greater than	dbind_if="stock>0"
<	Less than	dbind_if="price<100"
>=	Greater or equal	dbind_if="rating>=4"
<=	Less or equal	dbind_if="quantity<=5"

String Comparisons

<!-- Status equals "active" -->
<span class="status-active" dbind_if="status==active">Active</span>

<!-- Status equals "pending" -->
<span class="status-pending" dbind_if="status==pending">Pending</span>

<!-- Status not equals "inactive" -->
<span dbind_if="status!=inactive">Currently operational</span>

<!-- Role equals "admin" -->
<div dbind_if="user.role==admin">
  Admin Panel Access
</div>

Data:

{
  "status": "active",
  "user": {
    "role": "admin"
  }
}

Numeric Comparisons

<!-- Stock checks -->
<span class="in-stock" dbind_if="stock>10">In Stock</span>
<span class="low-stock" dbind_if="stock<=10">Low Stock</span>
<span class="out-of-stock" dbind_if="stock==0">Out of Stock</span>

<!-- Price ranges -->
<span class="budget" dbind_if="price<50">Budget Friendly</span>
<span class="mid-range" dbind_if="price>=50">Mid Range</span>
<span class="premium" dbind_if="price>=200">Premium</span>

<!-- Rating display -->
<span dbind_if="rating>=4.5">⭐ Highly Rated</span>
<span dbind_if="rating>=3">Good Rating</span>
<span dbind_if="rating<3">Needs Improvement</span>

Use Cases

1. User Role-Based UI

<nav class="admin-nav">
  <!-- Super Admin only -->
  <a href="/admin/settings" dbind_if="role==superadmin">System Settings</a>

  <!-- Admin and Super Admin -->
  <a href="/admin/users" dbind_if="role!=viewer">Manage Users</a>

  <!-- Editor and above -->
  <a href="/admin/content" dbind_if="role!=viewer">Manage Content</a>

  <!-- Everyone -->
  <a href="/admin/dashboard">Dashboard</a>
</nav>

2. Order Status Timeline

<div class="order-timeline">
  <div class="step completed" dbind_if="status!=pending">
    ✓ Order Placed
  </div>
  <div class="step" dbind_class="statusClass" dbind_if="status!=pending">
    Processing
  </div>
  <div class="step" dbind_if="status==shipped">
    Shipped
  </div>
  <div class="step" dbind_if="status==delivered">
    Delivered
  </div>
</div>

3. Quantity-Based Messaging

<div class="stock-status">
  <span dbind_if="quantity==0" class="out-of-stock">
    Out of Stock - Email me when available
  </span>
  <span dbind_if="quantity<=5" class="low-stock">
    Only <span dbind_data="quantity"></span> left! Order soon.
  </span>
  <span dbind_if="quantity>5" class="in-stock">
    In Stock - Ships within 24 hours
  </span>
</div>

Note: Multiple conditions can match, so structure your HTML to handle overlapping ranges appropriately or use mutually exclusive conditions.

4. Subscription Tier Features

<div class="feature-list">
  <!-- Free tier -->
  <div dbind_if="tier==free">
    <h3>Free Plan</h3>
    <ul>
      <li>5 projects</li>
      <li>Basic support</li>
    </ul>
  </div>

  <!-- Pro tier -->
  <div dbind_if="tier==pro">
    <h3>Pro Plan</h3>
    <ul>
      <li>Unlimited projects</li>
      <li>Priority support</li>
      <li>Advanced analytics</li>
    </ul>
  </div>

  <!-- Enterprise tier -->
  <div dbind_if="tier==enterprise">
    <h3>Enterprise Plan</h3>
    <ul>
      <li>Everything in Pro</li>
      <li>Dedicated account manager</li>
      <li>Custom integrations</li>
      <li>SLA guarantee</li>
    </ul>
  </div>
</div>

5. Age/Date-Based Content

<div class="user-badge">
  <span dbind_if="memberDays>=365">🏆 Veteran Member</span>
  <span dbind_if="memberDays>=30">⭐ Active Member</span>
  <span dbind_if="memberDays<30">🆕 New Member</span>
</div>

6. Score/Rating Display

<div class="rating-badge">
  <span dbind_if="score>=90" class="grade-a">A</span>
  <span dbind_if="score>=80" class="grade-b">B</span>
  <span dbind_if="score>=70" class="grade-c">C</span>
  <span dbind_if="score>=60" class="grade-d">D</span>
  <span dbind_if="score<60" class="grade-f">F</span>
</div>

Important Notes

• String values in comparisons don't need quotes: dbind_if="status==active" not dbind_if="status=='active'"
• For boolean checks, prefer dbind_show: dbind_show="isActive" instead of dbind_if="isActive==true"
• Comparisons are case-sensitive for strings
• Nested properties work: dbind_if="user.role==admin"

---

dbind_unless

Purpose: Show an element unless a condition is true. This is the inverse of dbind_if.

Syntax:

<element dbind_unless="field==value"></element>

When to Use dbind_unless vs dbind_if

Intent	Use
"Show if status equals active"	dbind_if="status==active"
"Show if status is NOT active"	dbind_unless="status==active"
"Show if NOT admin"	dbind_unless="role==admin"

Basic Usage

<!-- Show unless user is admin -->
<div class="upgrade-prompt" dbind_unless="role==admin">
  <p>Upgrade to Admin for more features!</p>
</div>

<!-- Show unless item is sold out -->
<button class="add-to-cart" dbind_unless="stock==0">
  Add to Cart
</button>

<!-- Show unless already subscribed -->
<form class="newsletter-signup" dbind_unless="isSubscribed==true">
  <input type="email" placeholder="Your email">
  <button type="submit">Subscribe</button>
</form>

Use Cases

1. Showing Content to Non-Premium Users

<!-- Ad space for free users -->
<div class="advertisement" dbind_unless="tier==premium">
  <p>Advertisement</p>
  <a href="/upgrade">Go Premium to remove ads</a>
</div>

2. Showing Edit Controls to Non-Owners

<!-- Report button for non-owners -->
<button class="report-btn" dbind_unless="isOwner==true">
  Report Content
</button>

<!-- Only owners see edit -->
<button class="edit-btn" dbind_if="isOwner==true">
  Edit
</button>

3. Default State Messages

<!-- Show unless there's custom status -->
<span class="status-default" dbind_unless="customStatus==true">
  No status set
</span>
<span class="status-custom" dbind_if="customStatus==true" dbind_data="statusMessage">
</span>

---

dbind_empty

Purpose: Show an element when an array or value is empty. Commonly used for "no results" messages.

Syntax:

<element dbind_empty="arrayField"></element>

When is Something "Empty"?

dbind_empty shows the element when:

• Array is empty: []
• String is empty: ""
• Value is null
• Value is undefined

Basic Usage

<!-- Show when no items in list -->
<div class="product-list" dbind_repeat="products">
  <div class="product-card">
    <h3 dbind_data="name"></h3>
  </div>
</div>

<div class="no-products" dbind_empty="products">
  <p>No products found.</p>
  <a href="/products">Browse all products</a>
</div>

Use Cases

1. Search Results

<div class="search-results">
  <div dbind_repeat="results">
    <div class="result-item">
      <h4 dbind_data="title"></h4>
      <p dbind_data="description"></p>
    </div>
  </div>

  <div class="no-results" dbind_empty="results">
    <h3>No results found</h3>
    <p>Try adjusting your search terms or filters.</p>
    <button onclick="clearFilters()">Clear Filters</button>
  </div>
</div>

2. Empty Cart

<div class="shopping-cart">
  <div dbind_repeat="cartItems">
    <div class="cart-item">
      <span dbind_data="name"></span>
      <span dbind_data="price" dbind_format="currency:USD"></span>
    </div>
  </div>

  <div class="empty-cart" dbind_empty="cartItems">
    <img src="/images/empty-cart.svg" alt="Empty cart">
    <h3>Your cart is empty</h3>
    <p>Looks like you haven't added anything yet.</p>
    <a href="/products" class="btn-primary">Start Shopping</a>
  </div>
</div>

3. Empty Notifications

<div class="notifications-panel">
  <div dbind_repeat="notifications">
    <div class="notification" dbind_class="typeClass">
      <span dbind_data="message"></span>
      <time dbind_data="timestamp" dbind_format="date:relative"></time>
    </div>
  </div>

  <div class="no-notifications" dbind_empty="notifications">
    <span class="bell-icon">🔔</span>
    <p>You're all caught up!</p>
    <p>No new notifications.</p>
  </div>
</div>

4. Empty Dashboard State

<div class="projects-dashboard">
  <div class="projects-grid" dbind_repeat="projects">
    <div class="project-card">
      <h3 dbind_data="name"></h3>
    </div>
  </div>

  <div class="empty-state" dbind_empty="projects">
    <img src="/images/no-projects.svg" alt="No projects">
    <h2>Create your first project</h2>
    <p>Get started by creating a new project.</p>
    <button class="btn-primary" onclick="createProject()">
      + New Project
    </button>
  </div>
</div>

5. Empty Comments Section

<section class="comments-section">
  <h3>Comments (<span dbind_data="comments.length">0</span>)</h3>

  <div dbind_repeat="comments">
    <div class="comment">
      <img dbind_src="author.avatar" dbind_alt="author.name">
      <div class="comment-content">
        <strong dbind_data="author.name"></strong>
        <p dbind_data="text"></p>
      </div>
    </div>
  </div>

  <div class="no-comments" dbind_empty="comments">
    <p>No comments yet. Be the first to share your thoughts!</p>
  </div>

  <form class="comment-form">
    <textarea placeholder="Write a comment..."></textarea>
    <button type="submit">Post Comment</button>
  </form>
</section>

---

Comparison: When to Use Which

Attribute	Best For	Example
dbind_show	Simple boolean checks	dbind_show="isActive"
dbind_hide	Inverse boolean (hide when true)	dbind_hide="isLoading"
dbind_if	Value comparisons	dbind_if="status==active"
dbind_unless	Inverse comparisons	dbind_unless="role==admin"
dbind_empty	Empty array/value checks	dbind_empty="searchResults"

Decision Tree

Do you need to check if an array is empty?
  → YES: Use dbind_empty

Is it a simple true/false check?
  → YES, show when true: Use dbind_show
  → YES, hide when true: Use dbind_hide

Do you need to compare values (==, !=, >, <)?
  → YES, show when condition matches: Use dbind_if
  → YES, show when condition doesn't match: Use dbind_unless

---

Combining Visibility Attributes

With dbind_data

<!-- Show verified badge only for verified users -->
<span dbind_show="isVerified" class="badge-verified">
  ✓ Verified <span dbind_data="verificationDate" dbind_format="date:short"></span>
</span>

With dbind_repeat

<!-- Show "no results" for empty filtered list -->
<div dbind_repeat="filteredItems">
  <div class="item" dbind_data="name"></div>
</div>
<div dbind_empty="filteredItems">
  No items match your filters
</div>

With dbind_class

<!-- Conditional styling + visibility -->
<div dbind_show="alert" dbind_class="alertClass">
  <span dbind_data="alertMessage"></span>
</div>

Multiple Conditions

<!-- Complex visibility logic -->
<div class="premium-content">
  <!-- Show to premium users -->
  <div dbind_show="isPremium">
    <h2>Premium Content</h2>
    <div dbind_html="premiumContent"></div>
  </div>

  <!-- Show trial expiring warning -->
  <div dbind_if="daysLeft<=7" class="trial-warning">
    Your trial expires in <span dbind_data="daysLeft"></span> days
  </div>

  <!-- Show upgrade prompt to free users -->
  <div dbind_unless="isPremium==true" class="upgrade-cta">
    <h3>Unlock Premium Features</h3>
    <a href="/upgrade" class="btn-upgrade">Upgrade Now</a>
  </div>
</div>

---

CSS Considerations

How Visibility is Applied

By default, DBindly hides elements by setting display: none. You can customize this behavior:

/* Default behavior */
[dbind_show][data-dbindly-hidden],
[dbind_hide]:not([data-dbindly-hidden]),
[dbind_if][data-dbindly-hidden],
[dbind_unless][data-dbindly-hidden],
[dbind_empty][data-dbindly-hidden] {
  display: none !important;
}

Preventing Flash of Unstyled Content

Use dbind_cloak to prevent elements from showing before DBindly processes them:

<style>
  [dbind_cloak] { display: none; }
</style>

<div dbind_cloak>
  <span dbind_show="isLoggedIn">Welcome back!</span>
</div>

DBindly removes the dbind_cloak attribute after processing, revealing the correctly shown/hidden elements.

---

Complete Example: E-commerce Product Page

<div class="product-page">
  <!-- Product Header -->
  <header class="product-header">
    <h1 dbind_data="name"></h1>

    <!-- Badges -->
    <div class="badges">
      <span class="badge-new" dbind_show="isNew">New</span>
      <span class="badge-sale" dbind_show="onSale">Sale</span>
      <span class="badge-bestseller" dbind_if="salesRank<=10">Bestseller</span>
      <span class="badge-low-stock" dbind_if="stock<=5">Only <span dbind_data="stock"></span> left</span>
    </div>
  </header>

  <!-- Pricing -->
  <div class="pricing">
    <span class="current-price" dbind_data="price" dbind_format="currency:USD"></span>
    <span class="original-price" dbind_show="onSale" dbind_data="originalPrice" dbind_format="currency:USD"></span>
    <span class="discount-percent" dbind_show="onSale" dbind_data="discountPercent"></span>
  </div>

  <!-- Availability Status -->
  <div class="availability">
    <span class="in-stock" dbind_if="stock>10">
      ✓ In Stock - Ships within 24 hours
    </span>
    <span class="low-stock" dbind_if="stock<=10">
      ⚠ Low Stock - Only <span dbind_data="stock"></span> remaining
    </span>
    <span class="out-of-stock" dbind_if="stock==0">
      ✕ Out of Stock
    </span>
  </div>

  <!-- Add to Cart Section -->
  <div class="purchase-section">
    <!-- Show add to cart unless out of stock -->
    <button class="btn-add-cart" dbind_unless="stock==0">
      Add to Cart
    </button>

    <!-- Show notify me for out of stock -->
    <button class="btn-notify" dbind_if="stock==0">
      Notify When Available
    </button>
  </div>

  <!-- Reviews Section -->
  <section class="reviews">
    <h2>Customer Reviews</h2>

    <!-- Review summary (show if has reviews) -->
    <div class="review-summary" dbind_show="hasReviews">
      <span class="avg-rating">
        <span dbind_data="avgRating"></span>/5
      </span>
      <span>(<span dbind_data="reviewCount"></span> reviews)</span>
    </div>

    <!-- Review list -->
    <div class="review-list" dbind_repeat="reviews">
      <div class="review">
        <div class="reviewer">
          <span dbind_data="author"></span>
          <span class="verified-buyer" dbind_show="verifiedPurchase">✓ Verified</span>
        </div>
        <div class="rating" dbind_data="rating"></div>
        <p dbind_data="comment"></p>
      </div>
    </div>

    <!-- No reviews message -->
    <div class="no-reviews" dbind_empty="reviews">
      <p>No reviews yet. Be the first to review this product!</p>
      <button class="btn-write-review">Write a Review</button>
    </div>
  </section>
</div>

Data:

{
  "name": "Premium Wireless Headphones",
  "price": 149.99,
  "originalPrice": 199.99,
  "onSale": true,
  "discountPercent": "25% OFF",
  "isNew": false,
  "stock": 8,
  "salesRank": 5,
  "hasReviews": true,
  "avgRating": 4.7,
  "reviewCount": 128,
  "reviews": [
    {
      "author": "John D.",
      "rating": "★★★★★",
      "comment": "Amazing sound quality!",
      "verifiedPurchase": true
    },
    {
      "author": "Sarah M.",
      "rating": "★★★★☆",
      "comment": "Great value for the price.",
      "verifiedPurchase": false
    }
  ]
}

---

Next Steps

• Lists - Repeat elements for arrays
• Styling - Dynamic classes and styles
• Core Binding - Text content binding