data-attr

ภาพรวม

data-attr เชื่อมค่าข้อมูลกับ HTML element attributes สามารถกำหนดได้ทั้งแบบเดี่ยวหรือหลาย attributes พร้อมกัน

ใช้เมื่อ:

• กำหนด href, src, title หรือ attributes อื่นๆ แบบ dynamic
• Bind ค่าให้กับ form elements
• ควบคุม boolean attributes เช่น disabled, checked

ทำไมต้องใช้:

• ✅ กำหนดหลาย attributes ในคำสั่งเดียว
• ✅ จัดการ boolean attributes อย่างถูกต้อง
• ✅ อัพเดทแบบ reactive เมื่อข้อมูลเปลี่ยน
• ✅ ทำงานร่วมกับ ElementFactory property handlers

การใช้งานพื้นฐาน

Attribute เดียว

<a data-attr="href:link">คลิกที่นี่</a>

กับข้อมูล:

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

ผลลัพธ์:

<a href="https://example.com">คลิกที่นี่</a>

หลาย Attributes

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

กับข้อมูล:

{
  imageUrl: "/images/photo.jpg",
  imageAlt: "รูปสวยๆ",
  imageTitle: "คลิกเพื่อขยาย"
}

ผลลัพธ์:

<img src="/images/photo.jpg" alt="รูปสวยๆ" title="คลิกเพื่อขยาย">

Syntax

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

ฟีเจอร์

1. Attribute Bindings ทั่วไป

<!-- ลิงก์ -->
<a data-attr="href:url, target:linkTarget">ลิงก์</a>

<!-- รูปภาพ -->
<img data-attr="src:imagePath, alt:description">

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

2. Boolean Attributes

Boolean attributes ถูกจัดการเป็นพิเศษ:

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

กับข้อมูล:

{ isDisabled: true }

ผลลัพธ์:

<button disabled="disabled">ส่ง</button>

เมื่อค่าเป็น falsy attribute จะถูกลบออกทั้งหมด

Boolean attributes ที่รองรับ:

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

3. การเข้าถึง Nested Properties

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

4. การประเมิน Expression

<a data-attr="href:'/user/' + user.id">ดูโปรไฟล์</a>
<div data-attr="id:'item-' + index">รายการ</div>

5. กำหนด Value สำหรับ Form Elements

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

หมายเหตุ: สำหรับ two-way binding ใช้ data-model แทน

ตัวอย่างขั้นสูง

User Avatar กับ Fallback

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

Dynamic Links

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

ฟอร์มกับ 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">บันทึก</span>
    <span data-if="isSubmitting">กำลังบันทึก...</span>
  </button>
</form>

ภายใน 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>

API อ้างอิง

การตรวจสอบ Attribute Name

อนุญาตเฉพาะตัวอักษร ตัวเลข ขีดกลาง และขีดล่าง:

การจัดการ Attribute พิเศษ

ข้อควรระวัง

⚠️ 1. File Input ไม่สามารถกำหนด Value ได้

<!-- ❌ ไม่ทำงาน - ข้อจำกัดด้านความปลอดภัยของ browser -->
<input type="file" data-attr="value:filePath">

<!-- ✅ ใช้ data-files สำหรับแสดงไฟล์ที่มีอยู่ -->
<input type="file" data-files="existingFiles">

⚠️ 2. Colon ใน Expression

<!-- ❌ ผิด - colon สับสน -->
<a data-attr="href:http://example.com">ลิงก์</a>

<!-- ✅ ถูก - ใช้ quotes -->
<a data-attr="href:'http://example.com'">ลิงก์</a>
<a data-attr="href:websiteUrl">ลิงก์</a>

⚠️ 3. Attribute vs Property

<!-- ❌ ตรวจสอบ checked attribute -->
<input type="checkbox" data-attr="checked:isChecked">

<!-- ✅ ใช้ data-model สำหรับ two-way หรือ data-checked -->
<input type="checkbox" data-model="isChecked">
<input type="checkbox" data-checked="isChecked">

Directives ที่เกี่ยวข้อง

• data-class - สำหรับสลับ class
• data-style - สำหรับ inline styles
• data-model - สำหรับ two-way binding