Czasami muszę dodać klasę do elementu html na podstawie warunku. Problem w tym, że nie mogę wymyślić, jak to zrobić w czysty sposób. Oto przykład rzeczy, których próbowałem:

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

LUB

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

Nie podoba mi się pierwsze podejście, ponieważ jest zatłoczone i trudne do odczytania. Nie podoba mi się drugie podejście, ponieważ zagnieżdżanie jest schrzanione. Byłoby miło umieścić to w modelu (coś w stylu @status.css_class), ale to nie pasuje . Co robi większość ludzi?

Używam pierwszego sposobu, ale z nieco bardziej zwięzłą składnią:

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

Chociaż zwykle sukces należy przedstawić za pomocą logicznego truelub numerycznego identyfikatora rekordu, a niepowodzenie za pomocą wartości logicznej falselub nil. W ten sposób możesz po prostu przetestować swoją zmienną:

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

Drugi formularz wykorzystujący ?:operator trójskładnikowy jest przydatny, jeśli chcesz wybrać jedną z dwóch klas:

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

Na koniec możesz użyć pomocników tagów rekordów Rail, takich jak div_for, które automagicznie ustawią Twój identyfikator i klasę na podstawie przekazanego rekordu. Biorąc pod uwagę Personidentyfikator 47:

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

Unikanie logiki w widokach

Problem z podejściem standardowym polega na tym, że wymaga ono logiki w postaci ifinstrukcji lub trójek w widoku. Jeśli masz wiele warunkowych klas CSS zmieszanych z klasami domyślnymi, musisz umieścić tę logikę w interpolacji ciągów lub tagu ERB.

Oto zaktualizowane podejście, które pozwala uniknąć wprowadzania logiki do widoków:

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

class_string metoda

class_stringPomocnik bierze hash z par klucz / wartość złożonych z klasy CSS ciągów nazwy i wartości logicznych . Wynikiem metody jest ciąg klas, w których wartość logiczna jest oceniana jako true.

Przykładowe użycie

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

Inne przypadki użycia

Ten helper może być używany w ERBtagach lub z pomocnikami Rails, takimi jak 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 %>

Klasy albo / albo

W przypadkach użycia, w których konieczna byłaby trójskładnik (np. @success ? 'good' : 'bad'), Przekaż tablicę, w której pierwszy element jest klasą dla, truea drugi dlafalse

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

Zainspirowany React

Technika ta jest inspirowana dodatkiem o nazwie classNames(wcześniej znanym jako classSet) z Reactfront-endowego frameworka Facebooka .

Używanie w projektach Railsowych

Obecnie class_namesfunkcja nie istnieje w Railsach, ale ten artykuł pokazuje, jak dodać lub zaimplementować ją w swoich projektach.

Możesz także użyć pomocnika content_for, zwłaszcza jeśli DOM znajduje się w układzie i chcesz ustawić klasę css w zależności od częściowego załadowania.

Na układzie:

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

Częściowo:

- content_for :css_class do
    my_specific_class

To jest to.