streamalism.org

1. Pregled

U ovom uputstvu gledamo kako možemo definirati prilagođene atribute u HTML5 oznakama pomoću Thymeleaf-a. To je okvir mehanizma predloška koji omogućuje upotrebu običnog HTML-a za prikaz dinamičkih podataka.

Uvodni članak o majčinoj dušici ili njenoj integraciji s Springom potražite na ovoj poveznici.

2. Prilagođeni atributi u HTML5

Ponekad će nam trebati dodatne informacije na HTML stranicama da bismo izvršili neke obrade na strani klijenta. Na primjer, možda ćemo htjeti spremiti dodatne podatke u oblikulazni oznake kako bismo ih mogli koristiti tijekom slanja obrasca pomoću AJAX-a.

Isto tako, možda bismo htjeli prikazati prilagođene poruke o pogrešci provjere valjanosti korisniku koji ispunjava obrazac.

U svakom slučaju, te dodatne podatke možemo dostaviti pomoću prilagođenih atributa HTML 5. Prilagođeni atributi mogu se definirati u HTML oznaci pomoću podaci- prefiks.

Sada, da vidimo kako možemo definirati ove atribute pomoću zadanog dijalekta u Thymeleaf-u.

3. Prilagođeni HTML atributi u Thymeleaf-u

Prilagođeni atribut u HTML oznaci možemo odrediti sintaksom:

th: podaci- = ""

Stvorimo jednostavan obrazac koji omogućava studentu da se prijavi za tečaj kako bi vidio stvari na djelu:

Ovaj obrazac sadrži jedan padajući meni s dostupnim tečajevima i gumbom za prijavu.

Recimo da želimo korisniku prikazati prilagođenu poruku o pogrešci ako klikne na Pošalji bez odabira tečaja.

Poruku pogreške možemo spremiti kao prilagođeni atribut u Odaberi oznaku i stvorite JavaScript funkciju za potvrdu njene vrijednosti prilikom slanja obrasca.

Ažurirano Odaberi Oznaka izgleda otprilike ovako:

Ovdje dohvaćamo poruku o pogrešci iz snopa resursa.

Sada, kada korisnik pošalje obrazac bez odabira valjane opcije, ova JavaScript funkcija korisniku će prikazati poruku o pogrešci:

funkcija validateForm () {var e = document.getElementById ("tečaj"); var vrijednost = e.options [e.selectedIndex] .value; if (value == '') {var error = document.getElementById ("errormesg"); error.textContent = e.getAttribute ('poruka-provjere valjanosti'); return false; } return true; }

Slično tome, definiranjem možemo dodati više prilagođenih atributa HTML oznakama th: podaci- * atribut za svakog od njih.

3. Zaključak

U ovom smo kratkom članku istražili kako možemo iskoristiti podršku Thymeleaf za dodavanje prilagođenih atributa u HTML5 predloške.

Kao i uvijek radna verzija ovog koda dostupna je na Githubu.