streamalism.org

1. Prehľad

V tomto výučbe sa pozrieme na to, ako môžeme definovať vlastné atribúty v značkách HTML5 pomocou funkcie Thymeleaf. Je to rámec šablónového enginu, ktorý umožňuje použitie obyčajného HTML na zobrazenie dynamických údajov.

Úvodný článok o Thymeleaf alebo jeho integrácii s programom Spring nájdete na tomto odkaze.

2. Vlastné atribúty v HTML5

Niekedy môžeme vyžadovať ďalšie informácie na stránkach HTML, aby sme mohli vykonať nejaké spracovanie na strane klienta. Napríklad by sme mohli chcieť uložiť ďalšie dáta do formulárvstup tagy, aby sme ich mohli použiť pri odosielaní formulára pomocou AJAX.

Rovnako môžeme chcieť zobraziť chybové hlásenia o vlastnom overení používateľovi, ktorý vypĺňa formulár.

V každom prípade, tieto ďalšie údaje môžeme dodať pomocou vlastných atribútov HTML 5. Vlastné atribúty je možné definovať v značke HTML pomocou znaku údaje- predpona.

Teraz sa pozrime, ako môžeme tieto atribúty definovať pomocou predvoleného dialektu v Thymeleaf.

3. Vlastné atribúty HTML v priečinku Thymeleaf

Vlastný atribút môžeme v značke HTML určiť pomocou syntaxe:

th: data- = ""

Vytvorme jednoduchý formulár, ktorý umožní študentovi prihlásiť sa na kurz, aby videl veci v akcii:

Tento formulár obsahuje jednu rozbaľovaciu ponuku s dostupnými kurzami a tlačidlo odoslať.

Povedzme, že chceme používateľovi zobraziť vlastnú chybovú správu, ak klikne na odoslanie bez výberu kurzu.

Chybovú správu môžeme uložiť ako vlastný atribút v vyberte značka a vytvorte funkciu JavaScript na overenie jej hodnoty pri odoslaní formulára.

Aktualizované vyberte značka vyzerá asi takto:

Tu načítame chybové hlásenie z balíka prostriedkov.

Keď teraz používateľ odošle formulár bez výberu platnej možnosti, táto funkcia jazyka JavaScript zobrazí používateľovi chybové hlásenie:

function validateForm () {var e = document.getElementById ("kurz"); var hodnota = e.options [e.selectedIndex] .value; if (value == '') {var error = document.getElementById ("errormesg"); error.textContent = e.getAttribute ('data-validation-message'); návrat nepravdivý; } návrat pravdivý; }

Podobne môžeme do značiek HTML pridať viac vlastných atribútov definovaním th: data- * atribút pre každú z nich.

3. Záver

V tomto rýchlom článku sme preskúmali, ako môžeme využiť podporu spoločnosti Thymeleaf na pridanie vlastných atribútov do šablón HTML5.

Ako vždy je funkčná verzia tohto kódu k dispozícii na Github.