streamalism.org

1. Prehľad

Thymeleaf je veľmi populárny šablónový modul dodávaný spolu s Spring Boot. O tom sme už publikovali niekoľko článkov a vrelo odporúčame prejsť si sériu Baeldung's Thymeleaf.

V tejto príručke sa pozrieme na to, ako s nimi pracovať vyberte a možnosť tagy v Thymeleaf.

2. Základy HTML

V HTML môžeme vytvoriť rozbaľovací zoznam s viacerými hodnotami:

 Jablko Banán Pomarančová hruška 

Každý zoznam pozostáva z vyberte a vnorené možnosť značky. Webový prehliadač predvolene vykreslí zoznam s vopred vybranou prvou možnosťou.

Pomocou toho môžeme určiť, ktorá hodnota je vybraná vybraný atribút:

Oranžová

Ďalej môžeme určiť, že túto možnosť nie je možné zvoliť pomocou postihnutý atribút:

Prosím vyber...

3. Brzlík

V Thymleaf môžeme použiť th: pole atribút na vytvorenie väzby pohľadu s modelom:

Aj keď vyššie uvedený príklad skutočne nevyžaduje použitie šablónového modulu, v ďalších pokročilých príkladoch uvidíme silu Thymeleaf.

3.1. Možnosť Bez výberu

Ak uvažujeme o scenári, v ktorom je na výber viac možností, čistý a prehľadný spôsob, ako ich zobraziť, je použitie th: každý atribút spolu s th: hodnota a th: text:

Vo vyššie uvedenom príklade používame postupnosť čísel od 0 do 100. Každému číslu priradíme hodnotu i do možnosť značky hodnotu atribút a použijeme rovnaké číslo ako zobrazená hodnota.

Kód Thymeleaf sa v prehliadači vykreslí ako:

 0 1 2 ... 100 

Uvažujme o tomto príklade ako vytvoriť, tj. začíname s novým tvarom a percentuálnu hodnotu nebolo potrebné vopred vyberať.

3.2. Vybraný Možnosť

Ak chceme teraz rozšíriť náš formulár o aktualizovať funkčnosť, t.j. vrátime sa späť k predtým vytvorenému záznamu a chceme potom vyplniť formulár existujúcimi údajmi je potrebné zvoliť túto možnosť.

To môžeme dosiahnuť pridaním th: vybrané atribút spolu s určitou podmienkou:

Vo vyššie uvedenom príklade chceme prednastaviť hodnotu 75 kontrolou, či i sa rovná 75.

Avšak tento kód nebude fungovať, a vykreslený HTML bude:

 0 ... 74 75 76 ... 100 

Aby sme to napravili, musíme odstrániť th: pole a nahraďte ho názov a id atribúty:

Nakoniec dostaneme:

 0 ... 74 75 76 ... 100 

4. Záver

V tomto krátkom článku sme si overili, ako pracovať s selektormi rozbaľovacieho zoznamu / zoznamu v Thymeleaf. Existuje jedna častá nástraha s predvoľbou hodnôt, pre ktorú sme ukázali riešenie.

Kód použitý počas diskusie nájdete ako vždy na serveri GitHub.