streamalism.org

1. Overzicht

In deze korte tutorial leren we een paar verschillende manieren om CSS-klassen voorwaardelijk toe te voegen in Thymeleaf.

Als u niet bekend bent met Thymeleaf, raden we u aan onze inleiding erop te lezen.

2. Met behulp van th: als

Laten we aannemen dat het ons doel is om een wiens klassen worden bepaald door de server:

 Ik heb twee klassen: "base" en ofwel "condition-true" of "condition-false", afhankelijk van een server-side conditie. 

Voordat deze HTML wordt weergegeven, hebben we een goede manier nodig waarop de server een voorwaarde kan evalueren en ofwel de voorwaarde-waar klasse of de voorwaarde-false klasse, evenals een baseren klasse.

Bij het sjablonen van HTML is het vrij gebruikelijk dat er wat voorwaardelijke logica moet worden toegevoegd voor dynamisch gedrag.

Laten we eerst gebruiken th: als om de eenvoudigste vorm van voorwaardelijke logica te demonstreren:

 Deze HTML is gedupliceerd. We willen waarschijnlijk een betere oplossing. Deze HTML is gedupliceerd. We willen waarschijnlijk een betere oplossing. 

We kunnen hier zien dat dit logischerwijs zal resulteren in het koppelen van de juiste CSS-klasse aan ons HTML-element, maar deze oplossing is in strijd met het DROGE principe omdat hiervoor het hele codeblok moet worden gedupliceerd.

Gebruik makend van th: als kan in sommige gevallen zeker nuttig zijn, maar we moeten een andere manier zoeken om een ​​CSS-klasse dynamisch toe te voegen.

3. Met behulp van do: attr

Thymeleaf biedt ons een attribuut waarmee we andere attributen kunnen definiëren, genaamd do: attr.

Laten we het gebruiken om ons probleem op te lossen:

 Deze HTML is geconsolideerd, wat goed is, maar het Thymeleaf-attribuut heeft nog wat redundantie. 

Het is je misschien opgevallen dat de baseren klasse is nog steeds gedupliceerd. Ook, er is een specifieker Thymeleaf-attribuut dat we kunnen gebruiken bij het definiëren van klassen.

4. Met behulp van th: klasse

De th: klasse attribuut is een snelkoppeling voor th: attr = "class = ..." dus laten we het in plaats daarvan gebruiken, samen met het scheiden van de baseren klasse uit de conditie resultaat:

 De basis CSS-klasse moet nog worden toegevoegd met String-aaneenschakeling. We kunnen het een beetje beter doen. 

Deze oplossing is redelijk goed omdat het aan onze behoeften voldoet en DROOG is. Echter, er is nog een ander Thymeleaf-kenmerk waarvan we kunnen profiteren.

5. Met behulp van th: classappend

Zou het niet leuk zijn om onze basisklasse volledig los te koppelen van de voorwaardelijke logica? We kunnen onze baseren class en reduceer de voorwaardelijke logica tot alleen de relevante stukken:

 Deze HTML wordt geconsolideerd en de voorwaardelijke klasse wordt afzonderlijk toegevoegd van de statische basisklasse. 

6. Conclusie

Met elke iteratie van onze Thymeleaf-code leerden we over een nuttige voorwaardelijke techniek die later van pas zou kunnen komen. Uiteindelijk, we vonden dat met th: classappend biedt ons de beste combinatie van DROGE code en scheiding van zorg, terwijl we ook aan ons doel voldoen.

Al deze voorbeelden zijn te zien in een werkend Thymeleaf-project dat beschikbaar is op GitHub.