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

x-init เป็นคำสั่งใน Alpine.js ที่ใช้สำหรับรันโค้ดหรือฟังก์ชันในครั้งแรกที่ DOM ขององค์ประกอบนั้นถูกโหลดหรือเริ่มต้นใช้งาน

• เหมาะสำหรับการตั้งค่าข้อมูลเริ่มต้น, การเรียก API, หรือการจัดการ State เบื้องต้น
• โค้ดใน x-init จะถูกรันเพียงครั้งเดียว เมื่อองค์ประกอบถูกสร้างใน DOM

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

<div x-data x-init="functionOrExpression">
    <!-- Content -->
</div>

2. การใช้งาน x-init เบื้องต้น

ตัวอย่าง 1: การตั้งค่าข้อมูลเริ่มต้น

<div x-data="{ message: '' }" x-init="message = 'Welcome to Alpine.js!'">
    <p x-text="message"></p>
</div>

คำอธิบาย:

• x-init="message = 'Welcome to Alpine.js!' กำหนดค่าเริ่มต้นของ message
• เมื่อโหลด DOM, <p> จะแสดงข้อความ Welcome to Alpine.js!

3. การเรียกฟังก์ชันด้วย x-init

ตัวอย่าง 2: การเรียกฟังก์ชันเพื่อคำนวณค่า

<div x-data="{ result: 0 }" x-init="calculate()">
    <p x-text="`The result is: ${result}`"></p>
</div>

<script>
    function calculate() {
        this.result = 5 + 10; // ตัวอย่างการคำนวณ
    }
</script>

คำอธิบาย:

• ฟังก์ชัน calculate() จะถูกรันเมื่อโหลด DOM และอัปเดตค่า result
• <p> จะแสดงผล The result is: 15

4. การเรียก API ด้วย x-init

ตัวอย่าง 3: การโหลดข้อมูลจาก API

<div x-data="{ users: [] }" x-init="fetchUsers()">
    <ul>
        <template x-for="user in users" :key="user.id">
            <li x-text="user.name"></li>
        </template>
    </ul>
</div>

<script>
    function fetchUsers() {
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(response => response.json())
            .then(data => {
                this.users = data; // อัปเดตรายการผู้ใช้งาน
            });
    }
</script>

คำอธิบาย:

• fetchUsers() เรียก API เพื่อดึงข้อมูลผู้ใช้และอัปเดตใน users
• แสดงรายการผู้ใช้ใน <ul> เมื่อข้อมูลถูกโหลดสำเร็จ

5. การใช้งาน x-init กับค่าที่ต้องการ Dynamic

ตัวอย่าง 4: ตั้งค่าด้วยวันที่ปัจจุบัน

<div x-data="{ currentDate: '' }" x-init="currentDate = new Date().toLocaleDateString()">
    <p x-text="`Today is: ${currentDate}`"></p>
</div>

คำอธิบาย:

• x-init="currentDate = new Date().toLocaleDateString()" ตั้งค่าตัวแปร currentDate เป็นวันที่ปัจจุบัน
• <p> จะแสดงข้อความ Today is: DD/MM/YYYY

6. การใช้งาน x-init ในสถานการณ์จริง

ตัวอย่าง 5: การเปิด Modal เมื่อโหลดหน้า

<div x-data="{ isOpen: false }" x-init="isOpen = true">
    <div x-show="isOpen" style="background: lightgrey; padding: 10px;">
        <p>This modal is automatically opened!</p>
        <button @click="isOpen = false">Close</button>
    </div>
</div>

คำอธิบาย:

• x-init="isOpen = true" เปิด Modal ทันทีเมื่อโหลดหน้าเว็บ
• ผู้ใช้สามารถปิด Modal ได้ด้วยปุ่ม Close

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

1. โหลดข้อมูลจาก API:
   • ควรตรวจสอบข้อผิดพลาด (Error Handling) เช่น การเชื่อมต่อ API ล้มเหลว
2. โค้ดที่ใช้ใน x-init:
   • ควรรักษาความเรียบง่าย เพื่อป้องกันการโหลดช้า
3. การอ้างอิง State:
   • ควรมั่นใจว่าชื่อ State ตรงกับที่กำหนดใน x-data

8. การใช้ x-init กับ Component ซ้อนกัน

ตัวอย่าง 6: การจัดการค่าร่วมกัน

<div x-data="{ parentMessage: '' }" x-init="parentMessage = 'Parent Initialized'">
    <p x-text="parentMessage"></p>
    <div x-data="{ childMessage: '' }" x-init="childMessage = 'Child Initialized'">
        <p x-text="childMessage"></p>
    </div>
</div>

คำอธิบาย:

• x-init สามารถใช้ได้ทั้งใน Parent และ Child Component
• Parent และ Child มี State แยกกัน

9. การประยุกต์ใช้ x-init ร่วมกับ Transition

ตัวอย่าง 7: ใช้ Transition เมื่อโหลดองค์ประกอบ

<div x-data="{ isVisible: false }" x-init="isVisible = true">
    <div x-show="isVisible" x-transition style="background: lightblue; padding: 10px;">
        <p>This element fades in when loaded!</p>
    </div>
</div>

คำอธิบาย:

• x-init="isVisible = true" ทำให้องค์ประกอบปรากฏเมื่อโหลด
• ใช้ x-transition เพื่อเพิ่มเอฟเฟกต์การแสดงผล

10. สรุป

ในบทนี้ คุณได้เรียนรู้การใช้ x-init เพื่อรันฟังก์ชันหรือโค้ดเมื่อ DOM ถูกโหลด ตัวอย่างการใช้งานครอบคลุมการตั้งค่าข้อมูลเริ่มต้น การเรียก API และการสร้างฟีเจอร์ Dynamic ต่าง ๆ ในบทถัดไป เราจะศึกษาวิธีการใช้ x-effect เพื่อจัดการ State และการเปลี่ยนแปลงค่าแบบ Reactive!