Feltételes CSS osztályok a Thymeleaf-ban
1. Áttekintés
Ebben a gyors bemutatóban megismerhetünk néhány különböző módszert a CSS-osztályok feltételes hozzáadására a Thymeleaf-ben.
Ha nem ismeri a Thymeleaf-ot, javasoljuk, hogy ellenőrizze a bevezetésünket.
2. Használata th: ha
Tegyük fel, hogy célunk a amelynek osztályait a szerver határozza meg:
Két osztályom van: "alap" és vagy "feltétel-igaz", vagy "feltétel-hamis", a kiszolgáló oldali feltételektől függően.
Mielőtt ezt a HTML-t kiszolgálnánk, szükségünk van egy jó módszerre a kiszolgáló számára egy állapot kiértékeléséhez, és vagy be kell foglalni a feltétel-igaz osztály vagy a feltétel-hamis osztály, valamint a bázis osztály.
A HTML-sablonok készítésekor elég gyakran feltételes logikát kell hozzáadni a dinamikus viselkedéshez.
Először is használjuk th: ha a feltételes logika legegyszerűbb formájának bemutatásához:
Ez a HTML megismétlődik. Valószínűleg jobb megoldást akarunk. Ez a HTML megismétlődik. Valószínűleg jobb megoldást akarunk.
Itt láthatjuk, hogy ez logikusan azt eredményezi, hogy a megfelelő CSS osztály lesz csatolva a HTML elemünkhöz, de ez a megoldás sérti a DRY elvét mert megköveteli a teljes kódblokk másolatát.
Használata th: ha Bizonyos esetekben hasznos lehet, de meg kell keresnünk egy másik módszert a CSS osztály dinamikus hozzáadására.
3. Használata th: vonz
A Thymeleaf felajánl egy olyan attribútumot, amely lehetővé teszi más attribútumok meghatározását, az úgynevezett th: vonz.
Használjuk a probléma megoldására:
Ez a HTML egységesített, ami jó, de a Thymeleaf attribútum még mindig tartalmaz némi redundanciát.
Lehet, hogy észrevette, hogy a bázis osztály továbbra is megismétlődik. Is, van egy specifikusabb Thymeleaf attribútum, amelyet az osztályok meghatározásakor használhatunk.
4. Használata th: osztály
A th: osztály attribútum a parancsikon th: attr = ”osztály =…” ezért használjuk inkább, elválasztva a bázis osztály a feltétel eredményéből:
Az alap CSS osztályt még mindig String összefűzéssel kell kiegészíteni. Kicsit jobban tehetünk.
Ez a megoldás nagyon jó, mert megfelel az igényeinknek és SZÁRAZ. Azonban, van még egy Thymeleaf attribútum, amelyből profitálhatunk.
5. Használata th: classappend
Nem lenne jó, ha teljesen elválasztanánk alaposztályunkat a feltételes logikától? Statikusan meghatározhatjuk bázis osztályra, és a feltételes logikát csak a megfelelő darabokra redukálja:
Ez a HTML konszolidálva van, és a feltételes osztály külön van hozzáadva a statikus alaposztályhoz.
6. Következtetés
A Thymeleaf kód minden egyes iterációjával megismerkedtünk egy hasznos feltételes technikával, amely később hasznos lehet. Végül, azt találtuk, hogy a th: classappend a legjobb kombinációt biztosítja számunkra a DRY kóddal és az aggodalom elkülönítésével, miközben célunkat is kielégíti.
Mindezek a példák egy működő Thymeleaf projektben láthatók, amely elérhető a GitHubon.