streamalism.org

1. Oversikt

I denne opplæringen ser vi på hvordan vi kan definere egendefinerte attributter i HTML5-koder ved hjelp av Thymeleaf. Det er et malmotorrammeverk som lar vanlig HTML brukes til å vise dynamiske data.

For en innledende artikkel om Thymeleaf eller dens integrering med Spring, se denne lenken.

2. Egendefinerte attributter i HTML5

Noen ganger kan det hende vi krever ekstra informasjon på HTML-sider for å gjøre noe på klientsiden. For eksempel kan det være lurt å lagre tilleggsdata i skjemainngang tagger slik at vi kan bruke dem mens vi sender inn skjemaet ved hjelp av AJAX.

På samme måte kan det være lurt å vise tilpassede valideringsfeilmeldinger til en bruker som fyller ut et skjema.

I alle fall, Vi kan levere disse tilleggsdataene ved å bruke HTML 5s egendefinerte attributter. Egendefinerte attributter kan defineres i en HTML-kode ved hjelp av data- prefiks.

La oss nå se hvordan vi kan definere disse attributtene ved hjelp av standarddialekten i Thymeleaf.

3. Egendefinerte HTML-attributter i Thymeleaf

Vi kan spesifisere et egendefinert attributt i en HTML-kode ved hjelp av syntaksen:

th: data- = ""

La oss lage et enkelt skjema som lar en student registrere seg for et kurs for å se ting i aksjon:

Dette skjemaet inneholder en enkelt rullegardin med tilgjengelige kurs og en send-knapp.

La oss si at vi vil vise en tilpasset feilmelding til brukeren hvis de klikker på send uten å velge et kurs.

Vi kan lagre feilmeldingen som et egendefinert attributt i å velge tagge og opprette en JavaScript-funksjon for å validere verdien ved innsending av skjemaet.

Den oppdaterte å velge tag ser omtrent slik ut:

Her henter vi feilmeldingen fra ressurspakken.

Nå, når brukeren sender inn skjemaet uten å velge et gyldig alternativ, vil denne JavaScript-funksjonen vise en feilmelding til brukeren:

funksjon validateForm () {var e = document.getElementById ("kurs"); var verdi = e.opsjoner [e.selectedIndex]. verdi; hvis (verdi == '') {var feil = document.getElementById ("errormesg"); error.textContent = e.getAttribute ('data-validering-melding'); returner falsk; } returner sant; }

På samme måte kan vi legge til flere egendefinerte attributter til HTML-koder ved å definere th: data- * attributt for hver enkelt av dem.

3. Konklusjon

I denne raske artikkelen undersøkte vi hvordan vi kan utnytte Thymeleafs støtte for å legge til egendefinerte attributter i HTML5-maler.

Som alltid er en fungerende versjon av denne koden tilgjengelig på Github.