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:
| Operator | Description | Example |
|---|---|---|
== | Equal to | dbind_if="status==active" |
!= | Not equal to | dbind_if="status!=deleted" |
=== | Strict equal | dbind_if="count===0" |
!== | Strict not equal | dbind_if="type!==null" |
> | Greater than | dbind_if="price>100" |
< | Less than | dbind_if="stock<10" |
>= | Greater than or equal | dbind_if="rating>=4" |
<= | Less than or equal | dbind_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
- Interactive - Search and pagination
- Examples - See conditionals in action