Css Ruby on Rails Haml

Cara Menetapkan `Nilai Kelas Dinamis` dalam Haml

Jika Anda sedang beralih dari ERB ke Haml dalam proyek Ruby on Rails Anda, Anda mungkin menemukan diri Anda perlu merepresentasikan nilai dinamis dalam struktur HTML Anda. Secara khusus, salah satu skenario umum adalah menetapkan kelas CSS secara dinamis berdasarkan status item. Posting blog ini akan memandu Anda tentang cara mencapai ini dalam Haml.

Masalahnya

Anda mungkin memiliki baris kode seperti ini dalam template ERB Anda:

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

Kode ini secara efektif mengaitkan kelas CSS dari status yang sedang ditetapkan ke elemen <span>. Ketika Anda mencoba untuk mengonversi kode ini ke Haml, mungkin tampak sedikit membingungkan pada awalnya. Anda ingin memastikan bahwa perilaku dinamis tetap utuh sambil memanfaatkan sintaks Haml yang bersih.

Solusi dalam Haml

Haml menyederhanakan tampilan dengan memungkinkan Anda menulis lebih sedikit kode sambil meningkatkan keterbacaan. Untuk mengonversi baris di atas ke Haml, Anda dapat mengikuti pendekatan ini:

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

Memecah Kode Haml

Mari kita analisis segmen kode Haml ini untuk memahami cara kerjanya:

%span: Bagian ini menunjukkan bahwa Anda ingin membuat elemen HTML <span>.
{:class => item.dashboardstatus.cssclass}: Di sinilah keajaiban terjadi! Sintaks ini menetapkan atribut class dari <span> menggunakan hash Ruby. Kunci :class menunjukkan bahwa kita menetapkan kelas CSS, dan nilainya diambil secara dinamis dari item.dashboardstatus.cssclass.
= item.dashboardstatus.status: Tanda sama dengan (=) menunjukkan bahwa apa yang mengikuti harus dimasukkan sebagai konten dari <span>, yang dalam hal ini adalah nilai dari item.dashboardstatus.status.

Mengapa Menggunakan Haml?

Menggunakan Haml dapat meningkatkan alur kerja pengembangan Anda karena beberapa alasan:

Sintaks yang Lebih Bersih: Haml menggunakan indentasi untuk menunjukkan nesting, yang menghasilkan lebih sedikit kekacauan dibandingkan HTML tradisional.
Lebih Sedikit Kode: Anda sering kali menulis lebih sedikit baris kode sambil mencapai output yang sama, yang membuat file tampilan Anda lebih mudah dibaca dan dipelihara.
Keterbacaan yang Ditingkatkan: Struktur Haml menekankan pentingnya tata letak dan desain, memudahkan pengembang untuk menemukan kesalahan atau memahami alur tampilan.

Kesimpulan

Menetapkan nilai kelas dinamis dalam Haml dapat dicapai dengan penyesuaian sederhana dari sintaks ERB. Dengan memanfaatkan sintaks hash untuk atribut kelas yang dikombinasikan dengan penyisipan konten dinamis Ruby, Anda tidak hanya mempertahankan fungsionalitas tetapi juga meningkatkan keterbacaan.