เจาะลึกการจัดการฟอร์มและ Live Inputs ใน Fitz LiveViews
เรียนรู้วิธีรับข้อมูลจากผู้ใช้งานจริงผ่านฟอร์ม เท็กซ์บ็อกซ์ และตัวเลือกต่างๆ ใน Fitz LiveViews ต่อจากบทความซีรีส์การสร้างเคาน์เตอร์
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- ต่อยอดจากบทความภาค 1 และภาค 2 ที่เคยพูดถึงการทำเคาน์เตอร์นับเลข
- ฟอร์มและ UI จริงต้องรองรับการรับข้อมูลทั้งข้อความและการเลือกตัวเลือก
- ใช้ @input สำหรับเหตุการณ์ทุกครั้งที่พิมพ์คีย์สโตรก และ @change เมื่อ blur หรือเลือก
- ค่าที่ผู้ใช้ป้อนจะถูกส่งผ่านเข้าไปในตัวแปร payload["value"]
ในบทความภาค 1 และ 2 ที่ผ่านมา เราได้พูดถึงการสร้างพิทช์และเคาน์เตอร์กันไปแล้ว ซึ่งตัวเคาน์เตอร์นั้นเป็นระบบง่ายๆ ที่อ่านค่าแค่บวกหนึ่งหรือลบหนึ่งเท่านั้น โดยไม่มีการไหลของข้อมูลที่ซับซ้อน ทว่าในโลกความเป็นจริง ยูสเซอร์อินเตอร์เฟซหรือ UI จำเป็นต้องรับข้อมูลจากผู้ใช้หลากหลายรูปแบบ ไม่ว่าจะเป็นข้อความ ตัวเลือก หรือฟิลด์กรอกข้อมูลต่างๆ บทความนี้จึงพามาเจาะลึกถึงวิธีการส่งข้อมูลเหล่านี้เข้าไปยังตัวจัดการ (handlers) ของคุณ
สำหรับการควบคุมที่ต้องการรายงานผลทันทีขณะที่กำลังพิมพ์หรือมีการเปลี่ยนแปลงการเลือก แอตทริบิวต์ @input (สำหรับทุกๆ การกดคีย์สโตรก) และ @change (เมื่อเกิดเหตุการณ์ blur หรือการเลือก) จะทำหน้าที่ส่งค่าปัจจุบันไปเก็บไว้ใน payload["value"] ให้โดยอัตโนมัติ
การจัดการอินพุตแบบเรียลไทม์ในสถาปัตยกรรมแบบ Fitz LiveViews ช่วยลดความซับซ้อนในการเขียนโค้ดฝั่งไคลเอนต์ลงได้อย่างมาก นักพัฒนาไม่ต้องคอยเขียน JavaScript event listeners แยกต่างหากเพื่อดึงค่าจาก DOM ทุกครั้งที่ผู้ใช้พิมพ์ แต่สามารถดักจับเหตุการณ์และประมวลผลผ่าน payload ได้ทันที ซึ่งเหมาะอย่างยิ่งสำหรับแอปพลิเคชันที่ต้องการความเร็วและการตอบสนองต่อผู้ใช้แบบฉับพลัน
เมื่อเรานำแนวคิดนี้ไปเชื่อมต่อเข้ากับไฟล์ main.fitz ซึ่งมีโครงสร้างรูปแบบเดียวกับตัวเคาน์เตอร์ในบทความภาค 2 ระบบก็จะสามารถทำงานร่วมกับฟอร์มและการรับข้อมูลสดๆ ได้อย่างราบรื่นโดยไม่ต้องอาศัยเฟรมเวิร์กฝั่งไคลเอนต์ขนาดใหญ่มาช่วยจัดการแต่อย่างใด
หากคุณชื่นชอบแนวคิดการจัดการอีเวนต์จากการพิมพ์โดยไม่ต้องพึ่งพาไคลเอนต์เฟรมเวิร์ก สามารถเข้าไปกดดาวให้กำลังใจที่หน้า repository กันได้ และในบทความถัดไปเราจะได้เห็นตัวอย่างการสร้างแอปพลิเคชันจริงกันต่อ
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น