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

x-bind เป็นคำสั่งใน Alpine.js ที่ใช้สำหรับผูกค่าจาก State ไปยัง Attributes ของ HTML Element เช่น class, src, href, หรือ Attributes แบบ Boolean เช่น disabled, checked, readonly

• ทำให้ HTML Attributes สามารถเปลี่ยนแปลงได้แบบ Dynamic
• รองรับการใช้ค่าจาก JavaScript Expressions

รูปแบบพื้นฐาน:

<element x-bind:attribute="expression"></element>

2. การใช้ x-bind กับ Attributes

ตัวอย่างพื้นฐาน:

<div x-data="{ url: 'https://example.com' }">
    <a x-bind:href="url">Visit Example</a>
</div>

คำอธิบาย:

• x-data="{ url: 'https://example.com' }" กำหนด State ชื่อ url
• x-bind:href="url" ผูกค่า href ของ <a> กับตัวแปร url

เมื่อโหลดหน้าเว็บ ลิงก์ใน <a> จะชี้ไปที่ https://example.com

3. การย่อ x-bind เป็น :

Alpine.js รองรับการย่อคำสั่ง x-bind ให้กระชับขึ้นโดยใช้ :

<a :href="url">Visit Example</a>

ผลลัพธ์: ทำงานเหมือนกับ x-bind:href="url"

4. การใช้ x-bind กับ Boolean Attributes

Boolean Attributes เช่น disabled, checked, หรือ readonly สามารถกำหนดค่าได้โดยตรงผ่าน x-bind

ตัวอย่าง:

<div x-data="{ isDisabled: true }">
    <button x-bind:disabled="isDisabled">Click Me</button>
</div>

การทำงาน:

• ถ้า isDisabled เป็น true, ปุ่มจะถูกปิดการใช้งาน (disabled)
• ถ้า isDisabled เป็น false, Attribute disabled จะถูกลบออก

5. การใช้ x-bind กับคลาส (class)

x-bind สามารถใช้เพื่อเปลี่ยนแปลง คลาส ของ HTML Element ตามเงื่อนไขที่กำหนด

ตัวอย่าง:

<div x-data="{ isActive: true }">
    <button x-bind:class="{ 'active': isActive, 'inactive': !isActive }">
        Toggle State
    </button>
</div>

การทำงาน:

• ถ้า isActive เป็น true, ปุ่มจะมีคลาส active
• ถ้า isActive เป็น false, ปุ่มจะมีคลาส inactive

6. การใช้ x-bind กับ Style (style)

สามารถใช้ x-bind เพื่อปรับ CSS Style ของ Element

ตัวอย่าง:

<div x-data="{ color: 'red' }">
    <p x-bind:style="'color: ' + color">This text is red</p>
    <button @click="color = 'blue'">Change to Blue</button>
</div>

การทำงาน:

• ข้อความใน <p> จะเปลี่ยนสีตามค่าของ color
• เมื่อคลิกปุ่ม สีจะเปลี่ยนเป็น blue

7. การใช้ x-bind กับ Attributes แบบกำหนดเอง

สามารถใช้ x-bind กับ Attributes ที่กำหนดเอง เช่น data-* Attributes

ตัวอย่าง:

<div x-data="{ customValue: 'My Custom Data' }">
    <div x-bind:data-custom="customValue"></div>
</div>

การทำงาน:

• Attribute data-custom จะถูกเพิ่มใน <div> พร้อมค่าที่ได้จากตัวแปร customValue

8. ตัวอย่างการใช้งานหลาย Attributes

สามารถใช้ x-bind หลายครั้งใน Element เดียว:

<div x-data="{ url: 'https://example.com', altText: 'Example Image' }">
    <img x-bind:src="url" x-bind:alt="altText">
</div>

คำอธิบาย:

• x-bind:src="url" กำหนด URL สำหรับรูปภาพ
• x-bind:alt="altText" กำหนดข้อความสำหรับ Attribute alt

9. ตัวอย่างการประยุกต์ใช้

ตัวอย่าง: การแสดง/ซ่อน Modal ด้วยคลาส

<div x-data="{ isOpen: false }">
    <button @click="isOpen = !isOpen">Toggle Modal</button>
    <div x-bind:class="{ 'hidden': !isOpen, 'block': isOpen }">
        This is a modal
    </div>
</div>

คำอธิบาย:

• ถ้า isOpen เป็น true, คลาส block จะถูกเพิ่มและแสดง Modal
• ถ้า isOpen เป็น false, คลาส hidden จะถูกเพิ่มและซ่อน Modal

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

• ใช้ค่าที่ปลอดภัย: หากค่าที่ใช้มาจากแหล่งภายนอก เช่น API ควรตรวจสอบความปลอดภัยก่อน
• Boolean Attributes: ค่า false จะลบ Attribute ออกจาก Element

สรุป

ในบทนี้ คุณได้เรียนรู้วิธีใช้ x-bind เพื่อผูกค่ากับ Attributes และปรับแต่ง HTML Element แบบ Dynamic พร้อมการย่อคำสั่ง x-bind เป็น : เพื่อความกระชับ ในบทถัดไป เราจะเรียนรู้เกี่ยวกับการแสดงและซ่อนองค์ประกอบด้วยคำสั่ง x-show!