บางครั้งฉันต้องเพิ่มคลาสให้กับองค์ประกอบ html ตามเงื่อนไข ปัญหาคือฉันไม่สามารถหาวิธีที่สะอาดได้ นี่คือตัวอย่างของสิ่งที่ฉันได้ลอง:

<div <%= if @status = 'success'; "class='ok'"; end %>>
   some message here
</div>

หรือ

<% if @status == 'success' %>
   <div class='success'>
<% else %>
   <div>
<% end %>
   some message here
</div>

ฉันไม่ชอบวิธีแรกเพราะมันดูแออัดและอ่านยาก ฉันไม่ชอบแนวทางที่สองเพราะการทำรังถูกทำให้เสียหาย มันเป็นการดีที่จะใส่ไว้ในแบบจำลอง (บางอย่างเช่น@status.css_class) แต่นั่นไม่ได้อยู่ที่นั่น คนส่วนใหญ่ทำอะไร?

ฉันใช้วิธีแรก แต่ด้วยไวยากรณ์ที่กระชับกว่าเล็กน้อย:

<div class="<%= 'ok' if @status == 'success' %>">

แม้ว่าโดยปกติคุณควรแสดงถึงความสำเร็จด้วยรหัสบูลีนtrueหรือรหัสตัวเลขและความล้มเหลวด้วยบูลีนfalseหรือnil. ด้วยวิธีนี้คุณสามารถทดสอบตัวแปรของคุณ:

<div class="<%= 'ok' if @success %>">

รูปแบบที่สองโดยใช้ตัว?:ดำเนินการternary จะมีประโยชน์หากคุณต้องการเลือกระหว่างสองคลาส:

<div class="<%= @success ? 'good' : 'bad' %>">

สุดท้ายคุณสามารถใช้ตัวช่วยแท็กบันทึกของ Rail เช่นdiv_forซึ่งจะตั้งค่า ID และคลาสของคุณโดยอัตโนมัติตามบันทึกที่คุณให้ไว้ ให้Personกับ id 47:

# <div id="person_47" class="person good">
<% div_for @person, class: (@success ? 'good' : 'bad') do %>
<% end %>

หลีกเลี่ยงตรรกะในมุมมอง

ปัญหาเกี่ยวกับแนวทางมาตรฐานคือต้องใช้ตรรกะในรูปแบบของifคำสั่งหรือเทอร์นารีในมุมมอง หากคุณมีคลาส CSS แบบมีเงื่อนไขหลายคลาสผสมกับคลาสเริ่มต้นคุณจะต้องใส่ตรรกะนั้นลงในการแก้ไขสตริงหรือแท็ก ERB

นี่คือแนวทางการปรับปรุงที่หลีกเลี่ยงการใส่ตรรกะใด ๆ ในมุมมอง:

<div class="<%= class_string(ok: @success) %>">
   some message here
</div>

class_string วิธี

class_stringผู้ช่วยยิงแฮชคู่กับคีย์ / ค่าประกอบด้วยCSS สตริงชื่อชั้นและค่าบูลีน ผลลัพธ์ของเมธอดคือสตริงของคลาสที่ค่าบูลีนประเมินเป็นจริง

ตัวอย่างการใช้งาน

class_names(foo: true, bar: false, baz: some_truthy_variable)
# => "foo baz"

กรณีการใช้งานอื่น ๆ

ตัวช่วยนี้สามารถใช้ได้ภายในERBแท็กหรือกับตัวช่วย Rails เช่นlink_to.

<div class="<%= class_string(ok: @success) %>">
   some message here
</div>

<% div_for @person, class: class_string(ok: @success) do %>
<% end %>

<% link_to "Hello", root_path, class: class_string(ok: @success) do %>
<% end %>

อย่างใดอย่างหนึ่ง / หรือชั้นเรียน

สำหรับกรณีการใช้งานที่จำเป็นต้องใช้ ternary (เช่น@success ? 'good' : 'bad') ให้ส่งอาร์เรย์โดยที่องค์ประกอบแรกเป็นคลาสสำหรับtrueและอีกอันใช้สำหรับfalse

<div class="<%= [:good, :bad] => @success %>">

แรงบันดาลใจจากปฏิกิริยา

เทคนิคนี้ได้รับแรงบันดาลใจจาก Add-on ที่เรียกว่าclassNames(เดิมเรียกว่าclassSet) จากReactfront-end framework ของ Facebook

ใช้ในโครงการ Rails ของคุณ

ณ ตอนนี้class_namesฟังก์ชันนี้ไม่มีอยู่ใน Rails แต่บทความนี้จะแสดงวิธีเพิ่มหรือนำไปใช้ในโครงการของคุณ

คุณยังสามารถใช้ content_for helper โดยเฉพาะอย่างยิ่งถ้า DOM อยู่ในเค้าโครงและคุณต้องการตั้งค่าคลาส css ขึ้นอยู่กับการโหลดบางส่วน

ในเค้าโครง:

%div{class: content_for?(:css_class) ? yield(:css_class) : ''}

ในบางส่วน:

- content_for :css_class do
    my_specific_class

อย่างนั้นแหละ.