DBindly Docs
Data Attributes

Conditionals

Basic Conditionals

dbind_if

Show element only when a condition is true.

<!-- Simple truthy check -->
<span dbind_if="isActive">Active</span>

<!-- Equality check -->
<span dbind_if="status==published">Published</span>

<!-- Not equal -->
<span dbind_if="status!=draft">Not a Draft</span>

Comparison Operators

DBindly supports these operators in dbind_if:

OperatorDescriptionExample
==Equal todbind_if="status==active"
!=Not equal todbind_if="status!=deleted"
===Strict equaldbind_if="count===0"
!==Strict not equaldbind_if="type!==null"
>Greater thandbind_if="price>100"
<Less thandbind_if="stock<10"
>=Greater than or equaldbind_if="rating>=4"
<=Less than or equaldbind_if="quantity<=5"

Examples

Status Badges

<span dbind_if="status==active" class="badge-success">Active</span>
<span dbind_if="status==pending" class="badge-warning">Pending</span>
<span dbind_if="status==inactive" class="badge-danger">Inactive</span>

Stock Levels

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

Price Displays

<div class="pricing">
  <span dbind_if="hasDiscount==true" class="original-price" dbind_data="originalPrice"></span>
  <span dbind_data="price"></span>
  <span dbind_if="price>1000" class="premium-badge">Premium</span>
</div>

User Roles

<div dbind_if="role==admin" class="admin-controls">
  <button>Edit</button>
  <button>Delete</button>
</div>

<div dbind_if="role==editor">
  <button>Edit</button>
</div>

<div dbind_if="role==viewer">
  <span>View Only</span>
</div>

Combining with Other Attributes

With dbind_show/dbind_hide

<!-- dbind_show for simple truthy -->
<span dbind_show="featured">⭐ Featured</span>

<!-- dbind_if for complex conditions -->
<span dbind_if="rating>=4.5">šŸ† Top Rated</span>

With dbind_repeat

<div dbind_repeat="products">
  <h3 dbind_data="name"></h3>
  <span dbind_data="price"></span>

  <!-- Conditional badges per item -->
  <span dbind_if="onSale==true" class="sale">Sale!</span>
  <span dbind_if="stock<5" class="low-stock">Only a few left!</span>
  <span dbind_if="isNew==true" class="new">New</span>
</div>

Boolean Values

For boolean fields, you can check directly:

<!-- True check -->
<span dbind_if="isVerified==true">āœ“ Verified</span>

<!-- False check -->
<span dbind_if="isVerified==false">Not Verified</span>

<!-- Truthy check (no operator) -->
<span dbind_show="isVerified">āœ“ Verified</span>

Numeric Comparisons

<div class="product">
  <span dbind_data="name"></span>
  <span dbind_data="price"></span>

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

  <!-- Rating display -->
  <span dbind_if="rating>=4">⭐⭐⭐⭐</span>
  <span dbind_if="rating>=3" dbind_if="rating<4">⭐⭐⭐</span>
  <span dbind_if="rating<3">⭐⭐</span>
</div>

Complete Example

<div class="user-card">
  <img dbind_src="avatar" dbind_alt="name">
  <h3 dbind_data="name"></h3>
  <p dbind_data="bio"></p>

  <!-- Role badge -->
  <span dbind_if="role==admin" class="badge admin">Admin</span>
  <span dbind_if="role==moderator" class="badge mod">Moderator</span>
  <span dbind_if="role==member" class="badge member">Member</span>

  <!-- Status indicators -->
  <span dbind_show="isOnline" class="status online">Online</span>
  <span dbind_hide="isOnline" class="status offline">Offline</span>

  <!-- Verification -->
  <span dbind_if="verified==true" class="verified">āœ“ Verified</span>

  <!-- Activity level -->
  <span dbind_if="posts>100" class="active">Very Active</span>
  <span dbind_if="posts<=100" dbind_if="posts>10" class="moderate">Active</span>
  <span dbind_if="posts<=10" class="new-user">New User</span>
</div>

Next Steps