streamalism.org

1. Oversigt

I denne vejledning ser vi på, hvordan vi kan definere brugerdefinerede attributter i HTML5-tags ved hjælp af Thymeleaf. Det er en skabelonmotorramme, der gør det muligt at bruge almindelig HTML til at vise dynamiske data.

For en indledende artikel om Thymeleaf eller dens integration med Spring henvises til dette link.

2. Brugerdefinerede attributter i HTML5

Nogle gange kan vi kræve ekstra information på HTML-sider for at udføre nogle behandlinger på klientsiden. For eksempel vil vi måske gemme yderligere data i forminput tags, så vi kan bruge dem, mens vi sender formularen ved hjælp af AJAX.

På samme måde vil vi muligvis vise brugerdefinerede valideringsfejlmeddelelser til en bruger, der udfylder en formular.

Under alle omstændigheder vi kan levere disse yderligere data ved hjælp af HTML 5s tilpassede attributter. Brugerdefinerede attributter kan defineres i et HTML-tag ved hjælp af data- præfiks.

Lad os nu se, hvordan vi kan definere disse attributter ved hjælp af standarddialekten i Thymeleaf.

3. Brugerdefinerede HTML-attributter i Thymeleaf

Vi kan specificere en brugerdefineret attribut i et HTML-tag ved hjælp af syntaksen:

th: data- = ""

Lad os oprette en enkel form, der giver en studerende mulighed for at tilmelde sig et kursus for at se ting i aktion:

Denne formular indeholder en enkelt rullemenu med de tilgængelige kurser og en indsendeknap.

Lad os sige, at vi vil vise en brugerdefineret fejlmeddelelse til brugeren, hvis de klikker på send uden at vælge et kursus.

Vi kan gemme fejlmeddelelsen som en brugerdefineret attribut i Vælg tag og opret en JavaScript-funktion for at validere dens værdi ved indsendelse af formularen.

Den opdaterede Vælg tag ser sådan ud:

Her henter vi fejlmeddelelsen fra ressourcebunten.

Når brugeren nu sender formularen uden at vælge en gyldig mulighed, viser denne JavaScript-funktion en fejlmeddelelse til brugeren:

funktion validateForm () {var e = document.getElementById ("kursus"); var værdi = e.optioner [e.selectedIndex]. værdi; hvis (værdi == '') {var fejl = dokument.getElementById ("errormesg"); error.textContent = e.getAttribute ('datavalideringsmeddelelse'); returner falsk; } returner sandt }

På samme måde kan vi tilføje flere tilpassede attributter til HTML-tags ved at definere th: data- * attribut for hver enkelt af dem.

3. Konklusion

I denne hurtige artikel undersøgte vi, hvordan vi kan udnytte Thymeleafs support til at tilføje tilpassede attributter i HTML5-skabeloner.

Som altid er en fungerende version af denne kode tilgængelig på Github.