Evitando la logica nelle viste
Il problema con l'approccio standard è che richiede logica sotto forma di if
affermazioni o ternari nella vista. Se hai più classi CSS condizionali mescolate con classi predefinite, devi inserire quella logica in un'interpolazione di stringhe o in un tag ERB.
Ecco un approccio aggiornato che evita di inserire alcuna logica nelle visualizzazioni:
<div class="<%= class_string(ok: @success) %>">
some message here
</div>
class_string
metodo
L' class_string
helper prende un hash con coppie chiave / valore costituite da stringhe di nomi di classi CSS e valori booleani . Il risultato del metodo è una stringa di classi in cui il valore booleano viene valutato su true.
Utilizzo di esempio
class_names(foo: true, bar: false, baz: some_truthy_variable)
# => "foo baz"
Altri casi d'uso
Questo helper può essere utilizzato all'interno dei ERB
tag o con gli helper di Rails come 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 %>
O / O Classi
Per i casi d'uso in cui sarebbe necessario un ternario (ad esempio @success ? 'good' : 'bad'
), passa un array in cui il primo elemento è la classe per true
e l'altro è perfalse
<div class="<%= [:good, :bad] => @success %>">
Ispirato da React
Questa tecnica è ispirata da un componente aggiuntivo chiamato classNames
(precedentemente noto come classSet
) dal React
framework front-end di Facebook .
Utilizzo nei tuoi progetti Rails
Al momento, la class_names
funzione non esiste in Rails, ma questo articolo mostra come aggiungerla o implementarla nei propri progetti.