streamalism.org

1. Pregled

U ovom brzom vodiču naučit ćemo nekoliko različitih načina za uvjetno dodavanje CSS klasa u Thymeleaf.

Ako niste upoznati s majčinom dušicom, preporučujemo da provjerite naš uvod u nju.

2. Korištenje th: ako

Pretpostavimo da je naš cilj generirati čije klase određuje poslužitelj:

 Imam dvije klase: "base" i "condition-true" ili "condition-false", ovisno o stanju na strani poslužitelja. 

Prije nego što se posluži ovaj HTML, potreban nam je dobar način da poslužitelj procijeni stanje i uključi i stanje-istina razred ili uvjet-lažno razreda, kao i a baza razred.

Prilikom predloška HTML-a sasvim je uobičajeno da treba dodati neku uvjetnu logiku za dinamičko ponašanje.

Prvo, poslužimo se th: ako pokazati najjednostavniji oblik uvjetne logike:

 Ovaj HTML je dupliciran. Vjerojatno želimo bolje rješenje. Ovaj HTML je dupliciran. Vjerojatno želimo bolje rješenje. 

Ovdje možemo vidjeti da će ovo logično rezultirati da se ispravna CSS klasa prikači našem HTML elementu, ali ovo rješenje krši načelo SUHO jer zahtijeva dupliciranje cijelog bloka koda.

Koristeći th: ako svakako može biti korisno u nekim slučajevima, ali trebali bismo potražiti drugi način za dinamičko dodavanje CSS klase.

3. Korištenje th: atr

Majčina dušica nudi nam atribut koji će nam omogućiti definiranje ostalih atributa, tzv th: atr.

Upotrijebimo ga za rješavanje našeg problema:

 Ovaj HTML je konsolidiran, što je dobro, ali atribut Thymeleaf još uvijek sadrži određenu suvišnost. 

Možda ste primijetili da baza razred je i dalje dupliciran. Također, postoji specifičniji atribut Thymeleaf koji možemo koristiti pri definiranju klasa.

4. Korištenje th: razred

The th: razred atribut je prečac za th: attr = "klasa = ..." pa ga upotrijebimo umjesto odvajanja znaka baza razred izvan rezultata:

 Osnovna CSS klasa još uvijek mora biti dodana sa String concatenation. Možemo malo bolje. 

Ovo je rješenje prilično dobro jer udovoljava našim potrebama i SUHO JE. Međutim, još uvijek postoji još jedan atribut majčine dušice od kojeg možemo imati koristi.

5. Korištenje th: classappend

Ne bi li bilo lijepo potpuno odvojiti našu osnovnu klasu od uvjetne logike? Mi možemo statički definirati naše baza klase i svesti uvjetnu logiku na samo relevantne dijelove:

 Ovaj HTML je konsolidiran, a uvjetna klasa dodana je odvojeno od statičke osnovne klase. 

6. Zaključak

Svakom iteracijom koda timijale saznali smo o korisnoj uvjetnoj tehnici koja bi vam kasnije mogla dobro doći. U konačnici, ustanovili smo da pomoću th: classappend pruža nam najbolju kombinaciju SUHOG koda i razdvajanje brige, a istovremeno zadovoljava naš cilj.

Svi ovi primjeri mogu se vidjeti u radnom Thymeleaf projektu koji je dostupan na GitHubu.