Éviter la logique dans les vues
Le problème avec l'approche standard est qu'elle nécessite une logique sous la forme d' if
énoncés ou de ternaires dans la vue. Si vous avez plusieurs classes CSS conditionnelles mélangées avec des classes par défaut, vous devez placer cette logique dans une interpolation de chaîne ou une balise ERB.
Voici une approche mise à jour qui évite de mettre de la logique dans les vues:
<div class="<%= class_string(ok: @success) %>">
some message here
</div>
class_string
méthode
L' class_string
assistant prend un hachage avec des paires clé / valeur constituées de chaînes de noms de classe CSS et de valeurs booléennes . Le résultat de la méthode est une chaîne de classes où la valeur booléenne est évaluée à true.
Exemple d'utilisation
class_names(foo: true, bar: false, baz: some_truthy_variable)
# => "foo baz"
Autres cas d'utilisation
Cet assistant peut être utilisé dans des ERB
balises ou avec des assistants Rails tels que 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 %>
Soit / Ou Classes
Pour les cas d'utilisation où un ternaire serait nécessaire (par exemple @success ? 'good' : 'bad'
), passez un tableau où le premier élément est la classe pour true
et l'autre pourfalse
<div class="<%= [:good, :bad] => @success %>">
Inspiré par React
Cette technique est inspirée d'un add-on appelé classNames
(anciennement connu sous le nom classSet
) du React
framework frontal de Facebook .
Utilisation dans vos projets Rails
Pour le moment, la class_names
fonction n'existe pas dans Rails, mais cet article vous montre comment l'ajouter ou l'implémenter dans vos projets.