data-options-key

ภาพรวม

data-options-key ใช้เติมรายการ options ให้ element กลุ่มที่ต้องอาศัย options จาก context.options เช่น select, multi-select, tags input และ text/autocomplete ที่ผ่าน element factory ของ Now.js

ใช้เมื่อ:

• ต้องการเติม options ให้ select หรือ autocomplete จาก state ที่โหลดมาจาก API
• ต้องการใช้ option collections ที่ FormManager หรือ template result binding ส่งมาให้
• ต้องการ resolve key ของ options แบบ dynamic ภายใน data-for

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

• ✅ อ่านข้อมูลจาก context.options
• ✅ reactive เมื่อ options ถูก bind ใหม่
• ✅ รองรับ plain key, dot path, bracket path และ {{ }} interpolation
• ✅ ใช้คู่กับ data-attr="value:..." หรือ data-model เพื่อเลือกค่าที่ถูกต้องได้

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

Select แบบง่าย

<select name="country"
        data-options-key="countries"
        data-attr="value:country">
  <option value="">เลือกประเทศ</option>
</select>

{
  country: 'TH',
  options: {
    countries: [
      { value: 'TH', text: 'ประเทศไทย' },
      { value: 'US', text: 'สหรัฐอเมริกา' }
    ]
  }
}

Key แบบ Dynamic ภายใน data-for

<div data-for="attribute in attributes">
  <template>
    <select data-options-key="attribute_options[{{attribute.id}}]"
            data-attr="value:attribute.selected">
      <option value="">เลือก...</option>
    </select>
  </template>
</div>

รูปแบบการค้นหาที่รองรับ

<select data-options-key="countries"></select>
<select data-options-key="catalog.countries"></select>
<select data-options-key="attribute_options[{{attribute.id}}]"></select>
<input data-element="tags" data-options-key="tag_sets.{{language}}">

key ที่ resolve แล้วจะถูกค้นภายใต้ context.options เสมอ

ใช้งานคู่กับอะไรดี

data-attr="value:..."

ใช้ data-attr เมื่อค่าที่ถูกเลือกมาจากข้อมูล API แบบ one-way:

<select data-options-key="roles"
        data-attr="value:user.role_id">
  <option value="">เลือกสิทธิ์</option>
</select>

data-model

ใช้ data-model เมื่อค่าที่เลือกควรถูกเขียนกลับลง state:

<select data-options-key="roles"
        data-model="form.role_id">
  <option value="">เลือกสิทธิ์</option>
</select>

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

data-options-key ไม่ได้ทำงานแค่ครั้งเดียว เมื่อ TemplateManager bind block เดิมใหม่ด้วย context.options ชุดใหม่ element จะถูกเติม options ใหม่ด้วย โดยภายในมี signature cache เพื่อกันการ repaint ที่ไม่จำเป็น

จึงเหมาะกับกรณีเช่น:

• initial form load แล้วตามด้วย watched API update
• modal form ที่ถูก bind ใหม่ด้วย option set คนละชุด
• data-for ที่แต่ละแถวต้อง resolve option key คนละตัว

ข้อควรระวัง

1. ใช้ data-options-key แต่ไม่มี context.options

<!-- ❌ ไม่มี options source ที่ตรงกัน -->
<select data-options-key="countries"></select>

ควรคืน option collections มาไว้ใต้ options ของ context แม่

2. คิดว่า data-options-key จะเลือกค่าที่ selected ให้เอง

data-options-key มีหน้าที่เติมรายการ options เท่านั้น ไม่ได้เลือกค่าปัจจุบันให้อัตโนมัติ

ให้ใช้ร่วมกับอย่างใดอย่างหนึ่ง:

• data-attr="value:..."
• data-model="..."

3. ส่งรูปแบบข้อมูลไม่ตรง

รูปแบบ option item ที่ใช้บ่อยคือ:

[{"value":"TH","text":"ประเทศไทย"}]

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

• data-attr - one-way value binding
• data-model - two-way selection binding
• data-for - resolve option key แบบ dynamic ต่อแถว