Attribute Reference

This page provides a comprehensive reference of all DBindly data attributes. Click on any attribute to see detailed documentation, examples, and use cases.

Quick Reference Table

Attributes by Category

Core Binding

These attributes handle the fundamental task of binding data to your HTML elements.

• dbind_data - The primary attribute for displaying text content from your data
• dbind_html - Display raw HTML content (use only with trusted data)
• dbind_default - Specify fallback values when data is missing or null

HTML Attributes

Bind data values to standard HTML attributes like links, images, and form elements.

• dbind_href - Set the href attribute on anchor tags
• dbind_src - Set the src attribute on images, videos, iframes
• dbind_alt - Set the alt attribute for accessibility
• dbind_title - Set the title attribute for tooltips
• dbind_placeholder - Set input placeholder text

Styling

Dynamically control CSS classes and inline styles based on your data.

• dbind_class - Add CSS classes from data values
• dbind_style - Add inline styles from data values

Visibility & Conditionals

Control element visibility based on data conditions.

• dbind_show - Show element when value is truthy
• dbind_hide - Hide element when value is truthy
• dbind_if - Advanced conditional with comparison operators
• dbind_unless - Inverse conditional (show when false)
• dbind_empty - Show when array or value is empty

Lists & Repetition

Render arrays and collections with filtering, sorting, and limiting.

• dbind_repeat - Repeat element for each item in array
• dbind_repeat-empty - Fallback content for empty arrays
• dbind_filter - Filter items by field value
• dbind_sort - Sort items by field
• dbind_limit - Limit number of displayed items

Collections & Pagination

Work with server-side collections including search and pagination.

• dbind_collection - Load data from a named collection
• dbind_search - Create a search input for filtering
• dbind_paginate - Add automatic pagination
• dbind_loadmore - Add "Load More" button
• dbind_page-info - Display current page information

Data Loading

Connect HTML elements to specific data from your collections.

• URL Parameter ?did= - Auto-load single item on page load
• DBindly.load(dataId) - Load single item via JavaScript
• dbind_reactive - Real-time subscription to a data item
• dbind_collection - Load all items from a collection

See the Data Loading guide for complete documentation.

Forms & Events

Two-way data binding and event handling for interactive forms.

• dbind_model - Two-way binding for form inputs
• dbind_click - Handle click events
• dbind_submit - Handle form submissions
• dbind_error - Display general error messages
• dbind_error-field - Display field-specific errors

Formatting & Filters

Apply formatting transformations to data values.

• dbind_format - Apply formatting filters (currency, date, etc.)

Loading States

Control loading indicators and skeleton screens.

• dbind_skeleton - Show skeleton placeholder during loading
• dbind_loading - Show/hide elements based on loading state

Animations & Transitions

Add smooth animations when content loads or changes.

• dbind_cloak - Hide content until fully loaded
• dbind_transition - Add fade/slide/scale entrance effects

Accessibility

Ensure your dynamic content is accessible to all users.

• dbind_aria-* - Bind dynamic ARIA attributes
• dbind_live - Announce content changes to screen readers

Similar Attributes Comparison

Understanding when to use similar-looking attributes is crucial for effective DBindly usage.

dbind_show vs dbind_hide vs dbind_if

<!-- dbind_show: Simple truthy check -->
<span dbind_show="isVerified">Verified</span>
 
<!-- dbind_hide: Hide when truthy -->
<span dbind_hide="isLoading">Content loaded</span>
 
<!-- dbind_if: Complex comparison -->
<span dbind_if="stock>0">In Stock</span>
<span dbind_if="status==premium">Premium Member</span>

dbind_data vs dbind_html

<!-- dbind_data: Safe, escaped text -->
<p dbind_data="userComment"></p>
<!-- If userComment is "<script>alert('xss')</script>", it displays as text -->
 
<!-- dbind_html: Raw HTML (use carefully!) -->
<div dbind_html="trustedRichContent"></div>
<!-- Only use with content you control, like CMS rich text -->

dbind_repeat vs dbind_collection

<!-- dbind_repeat: Use with existing array data -->
<div dbind_repeat="items">
  <span dbind_data="name"></span>
</div>
 
<!-- dbind_collection: Fetch from server -->
<div dbind_collection="products">
  <span dbind_data="name"></span>
</div>

dbind_filter vs dbind_search

<!-- dbind_filter: Static filter by field value -->
<div dbind_repeat="products" dbind_filter="category:electronics">
 
<!-- dbind_search: User-driven text search -->
<input type="text" dbind_search="products" placeholder="Search...">

dbind_paginate vs dbind_loadmore

<!-- dbind_paginate: Show page numbers -->
<div dbind_repeat="posts" dbind_paginate="10">
 
<!-- dbind_loadmore: Append more items -->
<div dbind_repeat="posts" dbind_loadmore="10">

Attribute Naming Convention

All DBindly attributes follow a consistent naming pattern:

dbind_[action/property]

• dbind_ - Prefix identifying DBindly attributes
• Action/Property - What the attribute does (data, show, repeat, etc.)

Modifier Patterns

Some attributes support modifiers:

dbind_[base]-[modifier]

Examples:

• dbind_repeat-empty - Empty state for repeat
• dbind_error-field - Field-specific error
• dbind_aria-label - Specific ARIA attribute

Next Steps

• Core Binding - Start with the fundamentals
• Examples - See attributes in action
• JavaScript API - Programmatic control