Basic Attributes

Text Content

dbind_data

Replace element's text content with a field value.

<h1 dbind_data="title"></h1>
<p dbind_data="description"></p>
<span dbind_data="author.name"></span>

Supports nested properties using dot notation:

<span dbind_data="user.profile.displayName"></span>

dbind_html

Set element's innerHTML (use with trusted content only).

<div dbind_html="richContent"></div>

Links and URLs

dbind_href

Set the href attribute of links.

<a dbind_href="url">Visit Website</a>
<a dbind_href="socialLinks.twitter">Twitter</a>

dbind_src

Set the src attribute of images, videos, or iframes.

<img dbind_src="imageUrl" alt="Product">
<video dbind_src="videoUrl"></video>
<iframe dbind_src="embedUrl"></iframe>

dbind_alt

Set the alt attribute of images.

<img dbind_src="imageUrl" dbind_alt="imageAlt">

Styling

dbind_style

Apply inline styles from data.

<div dbind_style="customStyles"></div>

Where the data contains:

{
  "customStyles": "background-color: #f0f0f0; padding: 20px;"
}

dbind_class

Add CSS classes from data.

<div dbind_class="statusClass"></div>

Where the data contains:

{
  "statusClass": "badge badge-success"
}

Visibility

dbind_show

Show element only when field is truthy.

<div dbind_show="isPublished">Published</div>
<span dbind_show="hasDiscount">On Sale!</span>

dbind_hide

Hide element when field is truthy.

<div dbind_hide="isArchived">Active Content</div>
<span dbind_hide="outOfStock">In Stock</span>

Complete Example

<article>
  <img dbind_src="image" dbind_alt="title">

  <h2 dbind_data="title"></h2>
  <p dbind_data="description"></p>

  <div dbind_class="categoryClass" dbind_style="categoryStyle">
    <span dbind_data="category"></span>
  </div>

  <span dbind_show="featured">⭐ Featured</span>
  <span dbind_hide="available">Out of Stock</span>

  <a dbind_href="link">Learn More</a>
</article>

With this data:

{
  "title": "Product Name",
  "description": "Product description here",
  "image": "https://example.com/image.jpg",
  "category": "Electronics",
  "categoryClass": "badge badge-primary",
  "categoryStyle": "font-size: 12px;",
  "featured": true,
  "available": true,
  "link": "https://example.com/product"
}

Next Steps

List Rendering - Render arrays and collections
Conditionals - Advanced conditional display