1. ความเข้าใจเกี่ยวกับ x-model

x-model เป็นคำสั่งใน Alpine.js ที่ใช้สำหรับ ผูกค่า (Two-way Data Binding) ระหว่าง State และ ฟอร์มอินพุต เช่น <input>, <textarea>, <select> เป็นต้น

• ช่วยให้ข้อมูลใน State และค่าของอินพุตสอดคล้องกัน
• เมื่อผู้ใช้เปลี่ยนแปลงค่าผ่านฟอร์ม อินพุต ค่าใน State จะถูกอัปเดตโดยอัตโนมัติ และในทางกลับกัน

โครงสร้างพื้นฐาน:

<input x-model="property">

• property คือชื่อของตัวแปรใน State ที่ต้องการผูกกับอินพุต

2. การผูกค่าใน <input> แบบพื้นฐาน

ตัวอย่าง:

<div x-data="{ name: '' }">
    <label for="name">Name:</label>
    <input type="text" id="name" x-model="name">
    <p>Your name is: <span x-text="name"></span></p>
</div>

คำอธิบาย:

• x-data="{ name: '' }" กำหนด State ชื่อ name เริ่มต้นเป็นค่าว่าง
• <input x-model="name"> ผูกค่าอินพุตกับตัวแปร name
• เมื่อผู้ใช้พิมพ์ชื่อลงในอินพุต ค่า name จะถูกอัปเดต
• <span x-text="name"></span> แสดงค่าของ name แบบเรียลไทม์

3. การผูกค่าใน <textarea>

ตัวอย่าง:

<div x-data="{ message: '' }">
    <label for="message">Message:</label>
    <textarea id="message" x-model="message"></textarea>
    <p>Your message:</p>
    <p x-text="message"></p>
</div>

คำอธิบาย:

• ผูกค่า message กับ <textarea> ผ่าน x-model
• เมื่อผู้ใช้พิมพ์ข้อความใน <textarea>, ค่า message จะอัปเดตตาม

4. การผูกค่าใน <input> ประเภทต่าง ๆ

ประเภท checkbox:

<div x-data="{ agree: false }">
    <label>
        <input type="checkbox" x-model="agree">
        I agree to the terms and conditions
    </label>
    <p x-text="agree ? 'Agreed' : 'Not Agreed'"></p>
</div>

คำอธิบาย:

• x-model="agree" ผูกค่า agree กับสถานะของ checkbox
• ค่า agree จะเป็น true เมื่อถูกเลือก และ false เมื่อไม่ถูกเลือก

ประเภท radio:

<div x-data="{ gender: '' }">
    <label>
        <input type="radio" name="gender" value="Male" x-model="gender">
        Male
    </label>
    <label>
        <input type="radio" name="gender" value="Female" x-model="gender">
        Female
    </label>
    <p>Your gender is: <span x-text="gender"></span></p>
</div>

คำอธิบาย:

• ผูกค่า gender กับกลุ่ม radio ที่มีค่า value ต่างกัน
• เมื่อผู้ใช้เลือกเพศ ค่า gender จะอัปเดตตาม value ของอินพุตที่ถูกเลือก

5. การผูกค่าใน <select>

ตัวอย่าง:

<div x-data="{ country: '' }">
    <label for="country">Select your country:</label>
    <select id="country" x-model="country">
        <option value="">Please select</option>
        <option value="Thailand">Thailand</option>
        <option value="Japan">Japan</option>
        <option value="USA">USA</option>
    </select>
    <p>Your country is: <span x-text="country"></span></p>
</div>

คำอธิบาย:

• ผูกค่า country กับ <select> ผ่าน x-model
• เมื่อผู้ใช้เลือกประเทศ ค่า country จะอัปเดตตาม value ของ <option>

6. การใช้ x-model กับข้อมูลที่เป็น Array (Multiple Select)

ตัวอย่าง:

<div x-data="{ selectedFruits: [] }">
    <label for="fruits">Select your favorite fruits:</label>
    <select id="fruits" x-model="selectedFruits" multiple>
        <option value="Apple">Apple</option>
        <option value="Banana">Banana</option>
        <option value="Cherry">Cherry</option>
    </select>
    <p>Your selected fruits:</p>
    <ul>
        <template x-for="fruit in selectedFruits" :key="fruit">
            <li x-text="fruit"></li>
        </template>
    </ul>
</div>

คำอธิบาย:

• ผูกค่า selectedFruits เป็น Array กับ <select> ที่มี multiple
• เมื่อผู้ใช้เลือกหลายรายการ ค่า selectedFruits จะเก็บเป็น Array ของ value ที่ถูกเลือก

7. การใช้ Modifiers กับ x-model

Modifiers ช่วยปรับพฤติกรรมของ x-model เช่น:

• .lazy: อัปเดตค่าเมื่ออินพุตเสียโฟกัส (blur) เท่านั้น
• .debounce: หน่วงเวลาการอัปเดตค่า
• .number: แปลงค่าที่รับมาเป็นตัวเลข
• .trim: ตัดช่องว่างหน้าและหลังข้อความ

ตัวอย่าง .lazy:

<div x-data="{ name: '' }">
    <label for="name">Name:</label>
    <input type="text" id="name" x-model.lazy="name">
    <p x-text="`Hello, ${name}`"></p>
</div>

คำอธิบาย:

• ค่า name จะอัปเดตเมื่ออินพุตเสียโฟกัสเท่านั้น

ตัวอย่าง .debounce:

<div x-data="{ search: '' }">
    <label for="search">Search:</label>
    <input type="text" id="search" x-model.debounce.500ms="search">
    <p x-text="`Searching for: ${search}`"></p>
</div>

คำอธิบาย:

• ค่า search จะอัปเดตหลังจากหยุดพิมพ์ไป 500 มิลลิวินาที

8. การใช้ x-model กับ Custom Components

หากมีการสร้าง Component ที่ซับซ้อน สามารถใช้ x-model เพื่อผูกค่ากับ Component นั้นได้

ตัวอย่าง:

<div x-data="{ date: '' }">
    <date-picker x-model="date"></date-picker>
    <p x-text="`Selected date: ${date}`"></p>
</div>

คำอธิบาย:

• ต้องมั่นใจว่า Component นั้นรองรับการผูกค่ากับ x-model

9. การผูกค่าแบบ Two-way Binding

x-model ช่วยให้การผูกค่าเป็นแบบ Two-way Binding:

• เมื่อค่าในอินพุตเปลี่ยน ค่าใน State จะอัปเดต
• เมื่อค่าใน State เปลี่ยน อินพุตจะแสดงค่าที่อัปเดต

ตัวอย่าง:

<div x-data="{ text: 'Hello' }">
    <input type="text" x-model="text">
    <button @click="text = 'Alpine.js'">Change Text</button>
    <p x-text="text"></p>
</div>

คำอธิบาย:

• เมื่อคลิกปุ่ม ค่า text จะเปลี่ยนเป็น 'Alpine.js'
• อินพุตและ <p> จะแสดงค่าใหม่โดยอัตโนมัติ

10. ข้อควรระวังในการใช้ x-model

1. ประเภทของอินพุต:
   • ตรวจสอบว่าอินพุตรองรับการผูกค่าด้วย x-model หรือไม่
   • สำหรับ checkbox และ radio ควรตรวจสอบค่าที่ผูกให้ถูกต้อง
2. การใช้ Modifiers:
   • ใช้ Modifiers อย่างระมัดระวัง เพื่อให้พฤติกรรมตรงกับที่ต้องการ
3. ความปลอดภัยของข้อมูล:
   • หากค่าที่ผูกมาจากแหล่งภายนอก ควรตรวจสอบความปลอดภัยก่อน

สรุป

ในบทนี้ คุณได้เรียนรู้วิธีใช้ x-model เพื่อผูกค่าระหว่าง State และฟอร์มอินพุตต่าง ๆ เช่น <input>, <textarea>, <select> รวมถึงการใช้ Modifiers เพื่อปรับพฤติกรรมของการผูกค่า การใช้ x-model ช่วยให้การจัดการข้อมูลในฟอร์มเป็นเรื่องง่ายและสะดวก ในบทถัดไป เราจะศึกษาการใช้ x-model กับอินพุตประเภทอื่น ๆ และการตรวจสอบค่าฟอร์ม!