Css Ruby on Rails Haml

วิธีตั้งค่า `Dynamic Class Value` ใน Haml

หากคุณกำลังเปลี่ยนจาก ERB ไป Haml ในโปรเจก Ruby on Rails ของคุณ คุณอาจพบว่าต้องการแสดงค่าที่เป็นพลศาสตร์ภายในโครงสร้าง HTML ของคุณ โดยเฉพาะอย่างยิ่ง สถานการณ์ที่พบบ่อยคือการตั้งค่า CSS class แบบพลศาสตร์ตามสถานะของรายการ บทความนี้จะชี้แนะวิธีการทำเช่นนี้ใน Haml

ปัญหา

คุณอาจมีบรรทัดโค้ดแบบนี้ในเทมเพลต ERB ของคุณ:

<span class="<%= item.dashboardstatus.cssclass %>"><%= item.dashboardstatus.status %></span>

โค้ดนี้จะเชื่อมโยง CSS class ของสถานะที่กำหนดไว้ในขณะนั้นกับองค์ประกอบ <span> เมื่อคุณพยายามแปลงโค้ดนี้เป็น Haml อาจดูสับสนในตอนแรก คุณต้องการให้พฤติกรรมพลศาสตร์ยังคงอยู่ในขณะที่ใช้ซินแท็กของ Haml ที่สะอาด

วิธีแก้ปัญหาใน Haml

Haml ทำให้การเขียนวิวง่ายขึ้นโดยอนุญาตให้คุณเขียนโค้ดให้น้อยลงในขณะที่ปรับปรุงความสามารถในการอ่าน เพื่อแปลงบรรทัดด้านบนเป็น Haml คุณสามารถใช้แนวทางนี้:

%span{:class => item.dashboardstatus.cssclass}= item.dashboardstatus.status

การแยกโค้ด Haml

เรามาวิเคราะห์ส่วนนี้ของโค้ด Haml เพื่อให้เข้าใจการทำงานของมัน:

%span: ส่วนนี้บ่งชี้ว่าคุณต้องการสร้างองค์ประกอบ HTML <span>
{:class => item.dashboardstatus.cssclass}: นี่คือที่ที่เวทมนต์เกิดขึ้น! ซินแท็กนี้ตั้งค่า class ของ <span> โดยใช้แฮชของ Ruby คีย์ :class แสดงว่าเรากำลังตั้งค่า CSS class และค่าได้รับการดึงมาแบบพลศาสตร์จาก item.dashboardstatus.cssclass
= item.dashboardstatus.status: เครื่องหมายเท่ากับ (=) แสดงว่าหลังจากนั้นจะถูกใส่เป็นเนื้อหาของ <span> ซึ่งในกรณีนี้คือค่าของ item.dashboardstatus.status

ทำไมต้องใช้ Haml?

การใช้ Haml สามารถปรับปรุงการทำงานพัฒนาของคุณได้จากหลายเหตุผล:

ซินแท็กที่สะอาดขึ้น: Haml ใช้การย่อหน้าเพื่อแสดงความซ้อน ซึ่งส่งผลให้มีความยุ่งเหยิงน้อยกว่า HTML แบบดั้งเดิม
โค้ดที่น้อยลง: คุณมักจะเขียนบรรทัดโค้ดน้อยลงในขณะที่ได้ผลลัพธ์เท่ากัน ซึ่งทำให้ไฟล์วิวของคุณอ่านง่ายและดูแลรักษา
การอ่านที่ดีขึ้น: โครงสร้างของ Haml เน้นที่ความสำคัญของเลย์เอาท์และการออกแบบ ทำให้มันง่ายต่อการตรวจจับข้อผิดพลาดหรือเข้าใจการไหลของวิว

สรุป

การตั้งค่า dynamic class value ใน Haml สามารถทำได้ด้วยการปรับเปลี่ยนซินแท็ก ERB อย่างง่าย ด้วยการใช้ซินแท็กแฮชสำหรับคุณลักษณะคลาสควบคู่กับการใส่เนื้อหาพลศาสตร์ของ Ruby คุณไม่เพียงแต่รักษาฟังก์ชันการทำงาน แต่ยังเพิ่มความสามารถในการอ่านอีกด้วย