streamalism.org

1. Oversigt

I denne hurtige vejledning lærer vi et par forskellige måder at tilføje CSS-klasser betinget i Thymeleaf.

Hvis du ikke er fortrolig med Thymeleaf, anbefaler vi at tjekke vores introduktion til det.

2. Brug th: hvis

Lad os antage, at vores mål er at generere en hvis klasser bestemmes af serveren:

 Jeg har to klasser: "base" og enten "condition-true" eller "condition-false" afhængigt af en serversides tilstand. 

Før denne HTML serveres, har vi brug for en god måde for serveren til at evaluere en tilstand og enten inkludere betingelsessand klasse eller betingelses-falsk klasse samt en grundlag klasse.

Når du skabeloner HTML, er det ret almindeligt at skulle tilføje en betinget logik for dynamisk adfærd.

Lad os først bruge th: hvis for at demonstrere den enkleste form for betinget logik:

 Denne HTML duplikeres. Vi ønsker sandsynligvis en bedre løsning. Denne HTML duplikeres. Vi ønsker sandsynligvis en bedre løsning. 

Vi kan her se, at dette logisk vil resultere i, at den korrekte CSS-klasse bliver knyttet til vores HTML-element, men denne løsning overtræder DRY-princippet fordi det kræver duplikering af hele kodeblokken.

Ved brug af th: hvis kan helt sikkert være nyttigt i nogle tilfælde, men vi bør se efter en anden måde til dynamisk at tilføje en CSS-klasse.

3. Brug th: attr

Thymeleaf tilbyder os en attribut, der lader os definere andre attributter, kaldet th: attr.

Lad os bruge det til at løse vores problem:

 Denne HTML er konsolideret, hvilket er godt, men Thymeleaf-attributten har stadig en vis redundans i sig. 

Du har måske bemærket, at grundlag klasse er stadig duplikeret. Også, der er en mere specifik Thymeleaf-attribut, vi kan bruge, når vi definerer klasser.

4. Brug th: klasse

Det th: klasse attribut er en genvej til th: attr = ”klasse =…” så lad os bruge det i stedet sammen med at adskille grundlag klasse ud af tilstandsresultatet:

 Basis CSS-klassen skal stadig tilføjes med streng sammenkædning. Vi kan gøre det lidt bedre. 

Denne løsning er ret god, fordi den opfylder vores behov og er TØR. Imidlertid, der er stadig endnu en Thymeleaf-attribut, som vi kan drage fordel af.

5. Brug th: classappend

Ville det ikke være rart at afkoble vores basisklasse fuldstændigt fra den betingede logik? Vi kan statisk definere vores grundlag klasse og reducere den betingede logik til kun de relevante brikker:

 Denne HTML er konsolideret, og den betingede klasse tilføjes separat fra den statiske basisklasse. 

6. Konklusion

Med hver iteration af vores Thymeleaf-kode lærte vi om en nyttig betinget teknik, der kan komme til nytte senere. Ultimativt, vi fandt ud af at bruge th: classappend giver os den bedste kombination af TØR kode og adskillelse af bekymring, samtidig med at vi også opfylder vores mål.

Alle disse eksempler kan ses i et fungerende Thymeleaf-projekt, der er tilgængeligt på GitHub.