dbindly

HTML attribute bindings allow you to dynamically set standard HTML attributes based on your data. These are essential for creating dynamic links, images, forms, and interactive elements.

dbind_href

Purpose: Dynamically set the href attribute on anchor (<a>) elements.

Syntax:

<a dbind_href="fieldName">Link Text</a>

Basic Usage

<!-- Simple link binding -->
<a dbind_href="website">Visit Website</a>
 
<!-- Nested property -->
<a dbind_href="author.profileUrl">View Author Profile</a>
 
<!-- Social links -->
<a dbind_href="social.twitter">Follow on Twitter</a>
<a dbind_href="social.linkedin">Connect on LinkedIn</a>

Data:

{
  "website": "https://example.com",
  "author": {
    "profileUrl": "/authors/john-doe"
  },
  "social": {
    "twitter": "https://twitter.com/johndoe",
    "linkedin": "https://linkedin.com/in/johndoe"
  }
}

Email and Phone Links

<!-- Email link with mailto: prefix in data -->
<a dbind_href="contactEmail">Email Us</a>
 
<!-- Phone link with tel: prefix in data -->
<a dbind_href="phoneLink">Call Us</a>

Data:

{
  "contactEmail": "mailto:contact@example.com",
  "phoneLink": "tel:+1-555-123-4567"
}

Combining with dbind_data

<!-- Dynamic link text and URL -->
<a dbind_href="url" dbind_data="linkText"></a>
 
<!-- Link with dynamic title tooltip -->
<a dbind_href="link" dbind_title="linkDescription">
  <span dbind_data="linkLabel"></span>
</a>

Use Cases

1. Navigation Menu

<nav class="main-nav">
  <div dbind_repeat="menuItems">
    <a dbind_href="url" dbind_data="label" class="nav-link"></a>
  </div>
</nav>

2. Product Card

<div class="product-card">
  <h3 dbind_data="name"></h3>
  <p dbind_data="description"></p>
  <a dbind_href="productUrl" class="btn-primary">View Product</a>
  <a dbind_href="addToCartUrl" class="btn-secondary">Add to Cart</a>
</div>

3. Author Bio

<div class="author-bio">
  <img dbind_src="avatar" dbind_alt="name">
  <h4 dbind_data="name"></h4>
  <div class="author-links">
    <a dbind_href="website" dbind_show="website">Website</a>
    <a dbind_href="twitter" dbind_show="twitter">Twitter</a>
    <a dbind_href="github" dbind_show="github">GitHub</a>
  </div>
</div>

4. Pagination Links

<div class="pagination">
  <a dbind_href="prevPageUrl" dbind_show="hasPrevPage">Previous</a>
  <a dbind_href="nextPageUrl" dbind_show="hasNextPage">Next</a>
</div>

Default Values

<!-- Fallback to # if link missing -->
<a dbind_href="externalLink" dbind_default="#">External Link</a>

Security Considerations

URLs are not sanitized - ensure your data contains valid URLs
For user-generated URLs, validate server-side before storing
Consider using rel="noopener noreferrer" for external links

<a dbind_href="externalUrl" target="_blank" rel="noopener noreferrer">
  External Link
</a>

dbind_src

Purpose: Dynamically set the src attribute on images, videos, iframes, and other media elements.

Syntax:

<img dbind_src="fieldName">
<video dbind_src="fieldName"></video>
<iframe dbind_src="fieldName"></iframe>

Basic Usage

<!-- Image source -->
<img dbind_src="imageUrl" alt="Product Image">
 
<!-- Nested property -->
<img dbind_src="user.avatar" alt="User Avatar">
 
<!-- Video source -->
<video dbind_src="videoUrl" controls></video>

Data:

{
  "imageUrl": "https://example.com/product.jpg",
  "user": {
    "avatar": "https://example.com/avatar.png"
  },
  "videoUrl": "https://example.com/demo.mp4"
}

Combining with dbind_alt

Always pair dbind_src with dbind_alt for accessibility:

<!-- Good: Dynamic alt text -->
<img dbind_src="image" dbind_alt="title">
 
<!-- Good: Static alt with dynamic image -->
<img dbind_src="heroImage" alt="Hero banner">

Use Cases

1. Product Gallery

<div class="product-gallery">
  <img dbind_src="mainImage" dbind_alt="name" class="main-image">
  <div class="thumbnails" dbind_repeat="thumbnails">
    <img dbind_src="url" dbind_alt="alt" class="thumbnail">
  </div>
</div>

2. User Avatar

<div class="user-card">
  <img
    dbind_src="avatar"
    dbind_alt="name"
    dbind_default="/images/default-avatar.png"
    class="avatar"
  >
  <span dbind_data="name"></span>
</div>

3. Blog Featured Image

<article class="blog-post">
  <img
    dbind_src="featuredImage"
    dbind_alt="title"
    dbind_default="/images/placeholder.jpg"
    class="featured-image"
    loading="lazy"
  >
  <h2 dbind_data="title"></h2>
</article>

4. Video Embed

<div class="video-container">
  <video
    dbind_src="videoUrl"
    poster="{{thumbnailUrl}}"
    controls
    preload="metadata"
  >
    Your browser does not support video.
  </video>
</div>

5. Responsive Images

<picture>
  <source dbind_srcset="imageLarge" media="(min-width: 1024px)">
  <source dbind_srcset="imageMedium" media="(min-width: 768px)">
  <img dbind_src="imageSmall" dbind_alt="description">
</picture>

Default/Fallback Images

<!-- Fallback for missing images -->
<img
  dbind_src="productImage"
  dbind_default="/images/no-image.jpg"
  dbind_alt="name"
>
 
<!-- Fallback for avatars -->
<img
  dbind_src="user.avatar"
  dbind_default="/images/default-user.png"
  alt="User"
>

Lazy Loading

Combine with native lazy loading for performance:

<img
  dbind_src="image"
  dbind_alt="title"
  loading="lazy"
  decoding="async"
>

Iframes

<!-- YouTube embed -->
<iframe
  dbind_src="youtubeEmbedUrl"
  width="560"
  height="315"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>
 
<!-- Google Maps embed -->
<iframe
  dbind_src="mapEmbedUrl"
  width="100%"
  height="400"
  style="border:0"
  loading="lazy"
></iframe>

dbind_alt

Purpose: Dynamically set the alt attribute for images, providing accessibility and SEO benefits.

Syntax:

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

Basic Usage

<!-- Alt from product name -->
<img dbind_src="image" dbind_alt="name">
 
<!-- Alt from dedicated field -->
<img dbind_src="photo" dbind_alt="photoDescription">

Why Alt Text Matters

Accessibility: Screen readers read alt text to visually impaired users
SEO: Search engines use alt text to understand image content
Fallback: Displayed when images fail to load

Use Cases

1. Product Images

<img
  dbind_src="productImage"
  dbind_alt="productName"
  class="product-thumbnail"
>

Data:

{
  "productImage": "/images/headphones.jpg",
  "productName": "Wireless Bluetooth Headphones - Black"
}

2. Team Member Photos

<img
  dbind_src="photo"
  dbind_alt="name"
>
<!-- Alt text: "Jane Smith" -->

3. Detailed Alt Descriptions

<img
  dbind_src="heroImage"
  dbind_alt="heroAltText"
>

Data:

{
  "heroImage": "/images/team-meeting.jpg",
  "heroAltText": "Team collaborating around a conference table during product planning"
}

Combining with Templates

<!-- Composite alt text -->
<div dbind_repeat="products">
  <img
    dbind_src="image"
    alt="{{name}} - {{color}} {{size}}"
  >
</div>

Default Alt Text

<img
  dbind_src="image"
  dbind_alt="title"
  dbind_default="Product Image"
>

dbind_title

Purpose: Dynamically set the title attribute, which displays as a tooltip on hover.

Syntax:

<element dbind_title="fieldName"></element>

Basic Usage

<!-- Tooltip on link -->
<a dbind_href="url" dbind_title="description">Link Text</a>
 
<!-- Tooltip on image -->
<img dbind_src="image" dbind_title="fullDescription">
 
<!-- Tooltip on any element -->
<span dbind_data="shortName" dbind_title="fullName"></span>

Use Cases

1. Truncated Text with Full Tooltip

<span
  class="truncated-text"
  dbind_data="title"
  dbind_title="fullTitle"
></span>

CSS:

.truncated-text {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2. Icon Buttons with Tooltips

<button dbind_title="actionDescription">
  <svg><!-- icon --></svg>
</button>

3. Abbreviations

<abbr dbind_title="fullTerm" dbind_data="abbreviation"></abbr>

Data:

{
  "abbreviation": "API",
  "fullTerm": "Application Programming Interface"
}

dbind_placeholder

Purpose: Dynamically set the placeholder attribute on form inputs.

Syntax:

<input dbind_placeholder="fieldName">
<textarea dbind_placeholder="fieldName"></textarea>

Basic Usage

<!-- Dynamic placeholder text -->
<input type="text" dbind_placeholder="searchPlaceholder">
 
<!-- Localized placeholder -->
<input type="email" dbind_placeholder="emailPlaceholder">

Data:

{
  "searchPlaceholder": "Search products...",
  "emailPlaceholder": "Enter your email address"
}

Use Cases

1. Search Input with Context

<input
  type="search"
  dbind_placeholder="searchHint"
  class="search-input"
>

Data (based on page context):

{
  "searchHint": "Search 1,234 products..."
}

2. Localized Form

<form>
  <input type="text" name="name" dbind_placeholder="form.namePlaceholder">
  <input type="email" name="email" dbind_placeholder="form.emailPlaceholder">
  <textarea name="message" dbind_placeholder="form.messagePlaceholder"></textarea>
</form>

Data (localized):

{
  "form": {
    "namePlaceholder": "Ihr Name",
    "emailPlaceholder": "Ihre E-Mail-Adresse",
    "messagePlaceholder": "Ihre Nachricht..."
  }
}

3. Dynamic Context

<input
  type="text"
  dbind_placeholder="filterPlaceholder"
  dbind_search="products"
>

Data:

{
  "filterPlaceholder": "Filter 56 items by name or category..."
}

Comparison Table

Attribute	HTML Element	Standard Attribute	Purpose
`dbind_href`	`<a>`, `<link>`	`href`	Link destinations
`dbind_src`	`<img>`, `<video>`, `<iframe>`	`src`	Media sources
`dbind_alt`	`<img>`	`alt`	Image descriptions
`dbind_title`	Any element	`title`	Tooltips
`dbind_placeholder`	`<input>`, `<textarea>`	`placeholder`	Input hints

Complete Example

<article class="product-card">
  <!-- Product Image with proper accessibility -->
  <a dbind_href="productUrl">
    <img
      dbind_src="image"
      dbind_alt="name"
      dbind_default="/images/placeholder.jpg"
      loading="lazy"
      class="product-image"
    >
  </a>
 
  <!-- Product Info -->
  <div class="product-info">
    <h3 dbind_data="name" dbind_title="fullDescription"></h3>
    <p dbind_data="shortDescription"></p>
 
    <!-- Action Links -->
    <div class="product-actions">
      <a dbind_href="productUrl" class="btn-view">View Details</a>
      <a dbind_href="addToCartUrl" dbind_title="addToCartTooltip" class="btn-cart">
        Add to Cart
      </a>
    </div>
  </div>
 
  <!-- Social Share -->
  <div class="social-share">
    <a dbind_href="shareTwitter" dbind_title="shareTwitterTitle" target="_blank">
      <img src="/icons/twitter.svg" alt="Share on Twitter">
    </a>
    <a dbind_href="shareFacebook" dbind_title="shareFacebookTitle" target="_blank">
      <img src="/icons/facebook.svg" alt="Share on Facebook">
    </a>
  </div>
</article>

Data:

{
  "name": "Premium Wireless Headphones",
  "shortDescription": "High-fidelity audio with active noise cancellation",
  "fullDescription": "Premium Wireless Headphones - 30-hour battery, Bluetooth 5.0, Active Noise Cancellation",
  "image": "https://example.com/headphones.jpg",
  "productUrl": "/products/premium-wireless-headphones",
  "addToCartUrl": "/cart/add?product=headphones-001",
  "addToCartTooltip": "Add Premium Wireless Headphones to your cart",
  "shareTwitter": "https://twitter.com/intent/tweet?url=...",
  "shareTwitterTitle": "Share this product on Twitter",
  "shareFacebook": "https://facebook.com/sharer/sharer.php?u=...",
  "shareFacebookTitle": "Share this product on Facebook"
}

Next Steps

Styling - Dynamic classes and styles
Visibility - Show/hide elements
Core Binding - Text content binding