data-bind

ภาพรวม

data-bind ใช้สำหรับผูกข้อมูลเชิงโครงสร้างเข้า element ที่ framework จัดการอยู่แล้ว ใน implementation ปัจจุบันของ TemplateManager จะใช้กับ:

• <table data-table="..."> ที่ TableManager ดูแล
• <table data-line-items="..."> ที่ LineItemsManager ดูแล

มันไม่ใช่ directive สำหรับ bind ข้อความทั่วไป ถ้าต้องการแสดง text, attribute หรือ loop ให้ใช้ data-text, data-attr และ data-for

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

• ✅ bind row data แบบ declarative
• ✅ รองรับ expression, dot path, bracket access และ {{ }} interpolation
• ✅ reactive เมื่อ expression เปลี่ยน
• ✅ รอให้ instance ของตาราง init เสร็จก่อนแล้วค่อย apply data

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

bind rows เข้า TableManager

<table data-table="leaveHistory"
       data-bind="historyRows">
  ...
</table>

{
  historyRows: [
    { id: 1, title: 'Approved', created_at: '2026-04-16 09:00' }
  ]
}

bind ข้อมูลแบบ nested

<table data-table="orders"
       data-bind="response.tables.orders">
  ...
</table>

bind line items

<table data-line-items="invoiceItems"
       data-bind="invoice.items">
  ...
</table>

ข้อมูลที่ส่งเข้า Manager

สำหรับ TableManager, data-bind รับได้ทั้ง:

• array ของ rows โดยตรง
• object ที่มี data, meta, filters, options หรือ columns

สำหรับ LineItemsManager, ควรเป็น array ของ rows หรือ object ที่ property data เป็น array ดังกล่าว

พฤติกรรมแบบ Reactive

data-bind ทำงานแบบ reactive ด้วย เมื่อ expression เปลี่ยน:

• expression จะถูกประเมินใหม่
• retry timer เดิมจะถูกล้าง
• manager เป้าหมายจะถูกอัปเดตอีกครั้งเมื่อพร้อม

สิ่งนี้สำคัญกับกรณีเช่น:

• ตารางที่ได้ข้อมูลหลัง API/template rebind
• line items ในฟอร์มที่ถูก bind ใหม่ด้วย record คนละชุด
• path ที่ resolve ชุดข้อมูลคนละตัวในภายหลังผ่าน data-for หรือ interpolation

ความเข้ากันได้กับ data-attr="data:..."

data-attr สามารถส่งต่อ binding แบบ data:fieldName มายัง data-bind ภายในได้:

<table data-table="orders"
       data-attr="data:response.orders">
  ...
</table>

รูปแบบนี้ยังรองรับเพื่อ backward compatibility แต่ใน template ใหม่ควรเขียน data-bind ตรงๆ เพื่อให้อ่านง่ายกว่า

ข้อควรระวัง

1. ใช้เหมือน data-text

<!-- ❌ ใช้งานผิดประเภท -->
<span data-bind="user.name"></span>

ควรใช้ data-text="user.name" แทน

2. ผูกกับ element ที่ framework ไม่ได้จัดการ

<!-- ❌ ไม่มีเป้าหมายเป็น TableManager / LineItemsManager -->
<div data-bind="rows"></div>

data-bind จะมีผลเฉพาะ element ที่ถูกจัดการเป็น table หรือ line items แล้วเท่านั้น

3. expression คืนค่า null หรือ undefined

ถ้า expression ให้ค่า null หรือ undefined จะไม่มีการ apply data

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

• data-for - render arrays ลง HTML โดยตรง
• data-attr - delegation แบบ data:... เพื่อ backward compatibility
• data-options-key - bind option collections ที่เกี่ยวข้อง