Ich muss gelegentlich eine Klasse zu einem HTML-Element hinzufügen, basierend auf einer Bedingung. Das Problem ist, dass ich keinen sauberen Weg finden kann, es zu tun. Hier ist ein Beispiel für das, was ich ausprobiert habe:
<div <%= if @status = 'success'; "class='ok'"; end %>>
some message here
</div>
ODER
<% if @status == 'success' %>
<div class='success'>
<% else %>
<div>
<% end %>
some message here
</div>
Ich mag den ersten Ansatz nicht, weil er überfüllt aussieht und schwer zu lesen ist. Ich mag den zweiten Ansatz nicht, weil die Verschachtelung vermasselt ist. Es wäre schön, es in das Modell aufzunehmen (so etwas wie @status.css_class
), aber das gehört nicht dorthin. Was machen die meisten Leute?
quelle
Vermeiden von Logik in den Ansichten
Das Problem beim Standardansatz besteht darin, dass Logik in Form von
if
Anweisungen oder Ternären in der Ansicht erforderlich ist . Wenn Sie mehrere bedingte CSS-Klassen mit Standardklassen gemischt haben, müssen Sie diese Logik in eine Zeichenfolgeninterpolation oder ein ERB-Tag einfügen.Hier ist ein aktualisierter Ansatz, bei dem keine Logik in die Ansichten eingefügt wird:
class_string
MethodeDer
class_string
Helfer verwendet einen Hash mit Schlüssel / Wert-Paaren, die aus CSS-Klassennamenzeichenfolgen und booleschen Werten bestehen . Das Ergebnis der Methode ist eine Zeichenfolge von Klassen, bei denen der boolesche Wert als wahr ausgewertet wird.Beispielnutzung
Andere Anwendungsfälle
Dieser Helfer kann innerhalb von
ERB
Tags oder mit Rails-Helfern wie zlink_to
.Entweder / Oder Klassen
Übergeben Sie für Anwendungsfälle, in denen ein Ternär erforderlich wäre (z. B.
@success ? 'good' : 'bad'
), ein Array, in dem das erste Element die Klasse fürtrue
und das andere für istfalse
Inspiriert von React
Diese Technik ist inspiriert von einem Add-On namens
classNames
(früher bekannt alsclassSet
) aus demReact
Front-End-Framework von Facebook .Verwendung in Ihren Rails-Projekten
Derzeit ist die
class_names
Funktion in Rails nicht vorhanden. In diesem Artikel erfahren Sie jedoch, wie Sie sie in Ihre Projekte einfügen oder in diese implementieren können.quelle
Sie können auch den Helfer content_for verwenden, insbesondere wenn sich das DOM in einem Layout befindet und Sie die CSS-Klasse abhängig vom teilweise geladenen festlegen möchten.
Auf dem Layout:
Zum Teil:
Das ist es.
quelle