streamalism.org

1. Overzicht

In deze tutorial bekijken we hoe we aangepaste attributen in HTML5-tags kunnen definiëren met Thymeleaf. Het is een sjabloon-engine-framework waarmee gewone HTML kan worden gebruikt om dynamische gegevens weer te geven.

Raadpleeg deze link voor een inleidend artikel over Thymeleaf of de integratie ervan met Spring.

2. Aangepaste kenmerken in HTML5

Soms hebben we extra informatie op HTML-pagina's nodig om wat bewerkingen aan de clientzijde uit te voeren. We willen bijvoorbeeld mogelijk aanvullende gegevens opslaan in het formulierinvoer tags zodat we ze kunnen gebruiken tijdens het indienen van het formulier met AJAX.

Evenzo willen we mogelijk aangepaste validatiefoutmeldingen weergeven aan een gebruiker die een formulier invult.

In elk geval, we kunnen deze aanvullende gegevens leveren door gebruik te maken van de aangepaste attributen van HTML 5. Aangepaste attributen kunnen worden gedefinieerd in een HTML-tag met behulp van de gegevens- voorvoegsel.

Laten we nu eens kijken hoe we deze attributen kunnen definiëren met behulp van het standaarddialect in Thymeleaf.

3. Aangepaste HTML-kenmerken in Thymeleaf

We kunnen een aangepast kenmerk in een HTML-tag specificeren met behulp van de syntaxis:

th: data- = ""

Laten we een eenvoudig formulier maken waarmee een student zich kan registreren voor een cursus om dingen in actie te zien:

Dit formulier bevat een enkele vervolgkeuzelijst met de beschikbare cursussen en een verzendknop.

Stel dat we een aangepast foutbericht aan de gebruiker willen laten zien als ze op verzenden klikken zonder een cursus te selecteren.

We kunnen het foutbericht opslaan als een aangepast kenmerk in het selecteer tag en maak een JavaScript-functie om de waarde ervan te valideren bij het verzenden van het formulier.

Het bijgewerkte selecteer tag ziet er ongeveer zo uit:

Hier halen we het foutbericht op uit de bronnenbundel.

Wanneer de gebruiker het formulier nu indient zonder een geldige optie te selecteren, geeft deze JavaScript-functie een foutmelding aan de gebruiker:

functie validateForm () {var e = document.getElementById ("cursus"); var waarde = e.options [e.selectedIndex] .value; if (waarde == '') {var error = document.getElementById ("errormesg"); error.textContent = e.getAttribute ('data-validation-message'); teruggeven false; } retourneren waar; }

Op dezelfde manier kunnen we meerdere aangepaste attributen aan HTML-tags toevoegen door do: data- * attribuut voor elk van hen.

3. Conclusie

In dit korte artikel hebben we onderzocht hoe we de ondersteuning van Thymeleaf kunnen gebruiken om aangepaste attributen toe te voegen aan HTML5-sjablonen.

Zoals altijd is er een werkende versie van deze code beschikbaar op Github.