118 votes

Ce qui est une manière élégante d'conditionnellement ajouter une classe à un élément HTML en vue?

J'ai parfois d'ajouter une classe à un élément html en fonction d'une condition. Le problème est que je ne peux pas trouver un moyen propre de le faire. Voici un exemple de ce que j'ai essayé:

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

OU

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

Je n'aime pas la première approche, car c'est bondé, à la recherche et difficile à lire. Je n'aime pas la deuxième approche, car l'imbrication est foutu. Il serait bien de le mettre dans le modèle, (quelque chose comme @status.css_class), mais qui ne leur appartient pas. Ce que font la plupart des gens?

157voto

meagar Points 85475

J'utilise la première méthode, mais avec un peu syntaxe plus concise:

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

Bien que généralement vous devez représenter succès avec l'opérateur booléen true ou numérique à l'ID de l'enregistrement, et l'échec avec l'opérateur booléen false ou nil. De cette façon, vous pouvez tester la qualité de votre variable:

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

Un deuxième formulaire à l'aide du ternaire ?: opérateur est utile si vous voulez choisir entre deux classes:

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

Enfin, vous pouvez utiliser des Rails de balise d'enregistrement aides telles que l' div_for, qui sera automatiquement configuré votre ID et une classe basée sur le dossier que vous lui donnez. Étant donné un Person avec l'id 47:

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X