data-attr

Overview

data-attr binds data values to HTML element attributes. It can set one or multiple attributes dynamically.

When to use:

• Set href, src, title, or other attributes dynamically
• Bind form element values
• Control boolean attributes like disabled, checked

Why use it:

• ✅ Set multiple attributes in one declaration
• ✅ Handles boolean attributes correctly
• ✅ Reactive updates when data changes
• ✅ Works with ElementFactory property handlers

Basic Usage

Single Attribute

<a data-attr="href:link">Click here</a>

With data:

{ link: "https://example.com" }

Output:

<a href="https://example.com">Click here</a>

Multiple Attributes

<img data-attr="src:imageUrl, alt:imageAlt, title:imageTitle">

With data:

{
  imageUrl: "/images/photo.jpg",
  imageAlt: "A beautiful photo",
  imageTitle: "Click to enlarge"
}

Output:

<img src="/images/photo.jpg" alt="A beautiful photo" title="Click to enlarge">

Syntax

<element data-attr="attrName:expression, attrName2:expression2">

Features

1. Common Attribute Bindings

<!-- Links -->
<a data-attr="href:url, target:linkTarget">Link</a>

<!-- Images -->
<img data-attr="src:imagePath, alt:description">

<!-- Form elements -->
<input data-attr="value:defaultValue, placeholder:hint">

2. Boolean Attributes

Boolean attributes are handled specially:

<button data-attr="disabled:isDisabled">Submit</button>
<input data-attr="readonly:isReadOnly">
<input data-attr="required:isRequired">

With data:

{ isDisabled: true }

Output:

<button disabled="disabled">Submit</button>

When the value is falsy, the attribute is removed entirely.

Supported boolean attributes:

• disabled, checked, readonly, required
• autofocus, multiple, novalidate, selected
• hidden, open, controls, loop, muted
• playsinline, reversed, async, defer

3. Nested Property Access

<img data-attr="src:user.avatar, alt:user.name">

4. Expression Evaluation

<a data-attr="href:'/user/' + user.id">View Profile</a>
<div data-attr="id:'item-' + index">Item</div>

5. Set Value for Form Elements

<input type="text" data-attr="value:user.name">
<select data-attr="value:selectedOption"></select>
<textarea data-attr="value:message"></textarea>

Note: For two-way binding, use data-model instead.

Advanced Examples

User Avatar with Fallback

<img data-attr="src:user.avatar || '/default-avatar.png', alt:user.name">

Dynamic Links

<a data-attr="href:'/products/' + product.slug, title:'View ' + product.name">
  <span data-text="product.name"></span>
</a>

Form with Dynamic Attributes

<form data-form="edit">
  <input
    type="text"
    name="email"
    data-attr="value:user.email, disabled:!canEdit, required:isRequired">

  <input
    type="password"
    name="password"
    data-attr="placeholder:passwordHint, minlength:minPasswordLength">

  <button data-attr="disabled:isSubmitting">
    <span data-if="!isSubmitting">Save</span>
    <span data-if="isSubmitting">Saving...</span>
  </button>
</form>

Inside data-for Loop

<ul data-for="item in items">
  <template>
    <li data-attr="id:'item-' + index, data-id:item.id">
      <a data-attr="href:item.url" data-text="item.label"></a>
    </li>
  </template>
</ul>

Dynamic Class via Attribute

<!-- Use data-attr for class attribute -->
<div data-attr="class:'card card-' + type"></div>

<!-- But prefer data-class for toggling -->
<div data-class="active:isActive, highlighted:isHighlighted"></div>

API Reference

Attribute Name Validation

Only alphanumeric characters, hyphens, and underscores are allowed:

Special Attribute Handling

Common Pitfalls

⚠️ 1. File Input Value Cannot Be Set

<!-- ❌ Won't work - browser security -->
<input type="file" data-attr="value:filePath">

<!-- ✅ Use data-files for displaying existing files -->
<input type="file" data-files="existingFiles">

⚠️ 2. Colon in Expression

<!-- ❌ Wrong - colon gets confused -->
<a data-attr="href:http://example.com">Link</a>

<!-- ✅ Correct - use quotes -->
<a data-attr="href:'http://example.com'">Link</a>
<a data-attr="href:websiteUrl">Link</a>

⚠️ 3. Attribute vs Property

<!-- ❌ Checking checked attribute -->
<input type="checkbox" data-attr="checked:isChecked">

<!-- ✅ Use data-model for two-way or data-checked -->
<input type="checkbox" data-model="isChecked">
<input type="checkbox" data-checked="isChecked">

⚠️ 4. Multiple Value Bindings to Same Attribute

<!-- ❌ Last one wins -->
<div data-attr="class:classA, class:classB">

<!-- ✅ Combine in expression -->
<div data-attr="class:classA + ' ' + classB">

Related Directives

• data-class - For class toggling
• data-style - For inline styles
• data-model - For two-way binding