streamalism.org

1. Oversikt

I denne raske opplæringen lærer vi noen forskjellige måter å legge til CSS-klasser i Thymeleaf på en betinget måte.

Hvis du ikke er kjent med Thymeleaf, anbefaler vi å sjekke introduksjonen til den.

2. Bruke th: hvis

La oss anta at målet vårt er å generere en hvis klasser blir bestemt av serveren:

 Jeg har to klasser: "base" og enten "condition-true" eller "condition-false" avhengig av server-tilstand. 

Før denne HTML-serveren serveres, trenger vi en god måte for serveren å evaluere en tilstand og enten inkludere tilstandssant klasse eller tilstand-usann klasse, samt en utgangspunkt klasse.

Når du maler HTML, er det ganske vanlig at du trenger å legge til litt betinget logikk for dynamisk oppførsel.

La oss først bruke th: hvis å demonstrere den enkleste formen for betinget logikk:

 Denne HTML-en er duplisert. Vi ønsker sannsynligvis en bedre løsning. Denne HTML-en er duplisert. Vi ønsker sannsynligvis en bedre løsning. 

Vi kan se her at dette logisk vil føre til at riktig CSS-klasse blir knyttet til HTML-elementet vårt, men denne løsningen bryter med DRY-prinsippet fordi det krever duplisering av hele kodeblokken.

Ved hjelp av th: hvis kan absolutt være nyttig i noen tilfeller, men vi bør se etter en annen måte å dynamisk legge til en CSS-klasse.

3. Bruke th: attr

Thymeleaf tilbyr oss et attributt som lar oss definere andre attributter, kalt th: attr.

La oss bruke den til å løse problemet vårt:

 Denne HTML-en er konsolidert, noe som er bra, men Thymeleaf-attributtet har fortsatt noe redundans i seg. 

Du har kanskje lagt merke til at utgangspunkt klasse er fortsatt duplisert. Også, det er en mer spesifikk Thymeleaf-attributt vi kan bruke når vi definerer klasser.

4. Bruke th: klasse

De th: klasse attributt er en snarvei for th: attr = ”class =…” så la oss bruke det i stedet, sammen med å skille utgangspunkt klasse utenfor tilstandsresultatet:

 Den basale CSS-klassen må fremdeles legges til med streng sammenkobling. Vi kan gjøre det litt bedre. 

Denne løsningen er ganske bra fordi den oppfyller våre behov og er TØRR. Derimot, det er fremdeles enda en Thymeleaf-attributt som vi kan ha nytte av.

5. Bruke th: classappend

Ville det ikke vært fint å frakoble baseklassen vår fra den betingede logikken? Vi kan statisk definere våre utgangspunkt klasse og redusere den betingede logikken til bare de aktuelle brikkene:

 Denne HTML-en konsolideres, og den betingede klassen legges til separat fra den statiske basisklassen. 

6. Konklusjon

For hver iterasjon av Thymeleaf-koden, lærte vi om en nyttig betinget teknikk som kan komme til nytte senere. Til syvende og sist, vi fant ut at bruk av th: classappend gir oss den beste kombinasjonen av TØRK-kode og separasjon av bekymring samtidig som vi tilfredsstiller vårt mål.

Alle disse eksemplene kan sees i et fungerende Thymeleaf-prosjekt tilgjengelig på GitHub.