Bazen bir koşula bağlı olarak bir html öğesine bir sınıf eklemem gerekir. Sorun şu ki, bunu yapmanın net bir yolunu bulamıyorum. İşte denediğim şeylere bir örnek:

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

VEYA

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

İlk yaklaşımı sevmiyorum çünkü kalabalık görünüyor ve okuması zor. İkinci yaklaşımı sevmiyorum çünkü yuvalama berbat. Onu modele koymak güzel olurdu (gibi bir şey @status.css_class), ama bu oraya ait değil. Çoğu insan ne yapar?

İlk yolu kullanıyorum, ancak biraz daha kısa sözdizimiyle:

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

Yine de genellikle başarıyı boole trueveya sayısal bir kayıt kimliği ile ve başarısızlığı boole falseveya nil. Bu şekilde değişkeninizi test edebilirsiniz:

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

Üçlü ?:operatörü kullanan ikinci bir form , iki sınıf arasında seçim yapmak istiyorsanız kullanışlıdır:

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

Son olarak, Rail kullanabilirsiniz rekor etiketi yardımcıları gibi div_forkimlik ve sınıf bunu vermek kayda dayalı automagicallylar oluşturacak olan,. Person47 kimlikli bir verildiğinde :

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

Görünümlerde mantıktan kaçınmak

Standart yaklaşımla ilgili sorun, şu şekilde mantık gerektirmesidir: if , görünümde ifadeler veya üçlüler . Varsayılan sınıflarla karıştırılmış birden çok koşullu CSS sınıfınız varsa, bu mantığı bir dize enterpolasyonuna veya ERB etiketine koymanız gerekir.

Görünümlere herhangi bir mantık koymaktan kaçınan güncellenmiş bir yaklaşım:

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

class_string yöntem

class_stringYardımcı oluşan anahtar / değer çiftleri ile bir karma alır CSS sınıf adı dizeleri ve boole değerlerini . Yöntemin sonucu, boole değerinin true olarak değerlendirildiği bir sınıf dizisidir.

Örnek Kullanım

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

Diğer Kullanım Durumları

Bu yardımcı, ERBetiketler içinde veya gibi Rails yardımcıları ile kullanılabilir 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 %>

Ya / Veya Sınıflar

Üçlü bir değerin gerekli olduğu kullanım durumları için (ör. @success ? 'good' : 'bad'), İlk öğenin sınıf için trueve diğer öğenin için olduğu bir dizi iletinfalse

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

React'ten ilham aldı

Bu teknik, Facebook'un ön uç çerçevesinden adı verilen classNames(eski adıyla classSet) bir eklentiden esinlenmiştir React.

Rails projelerinizde kullanmak

Şu an itibariyle, class_namesişlev Rails'de mevcut değil, ancak bu makale onu projelerinize nasıl ekleyeceğinizi veya uygulayacağınızı gösteriyor.

Ayrıca, özellikle DOM bir düzende bulunuyorsa ve css sınıfını kısmi yüklenen duruma göre ayarlamak istiyorsanız content_for yardımcısını da kullanabilirsiniz.

Düzende:

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

Kısmen:

- content_for :css_class do
    my_specific_class

İşte bu.