Работа с персонализирани HTML атрибути в Thymeleaf

1. Общ преглед

В този урок разглеждаме как можем да дефинираме персонализирани атрибути в HTML5 тагове, използвайки Thymeleaf. Това е рамка на шаблонен механизъм, която позволява обикновеният HTML да се използва за показване на динамични данни.

За уводна статия за Thymeleaf или нейната интеграция с Spring вижте тази връзка.

2. Персонализирани атрибути в HTML5

Понякога може да се наложи допълнителна информация в HTML страници, за да извършим някаква обработка от страна на клиента. Например, може да искаме да запазим допълнителни данни във входни маркери на формуляра, за да можем да ги използваме, докато изпращаме формуляра с помощта на AJAX.

По същия начин може да поискаме да покажем потребителски съобщения за грешки при проверка на потребител, попълващ формуляр.

Във всеки случай можем да предоставим тези допълнителни данни, като използваме персонализираните атрибути на HTML 5. Персонализираните атрибути могат да бъдат дефинирани в HTML таг с помощта на префикса за данни .

Сега нека видим как можем да дефинираме тези атрибути, използвайки диалекта по подразбиране в Thymeleaf.

3. Персонализирани HTML атрибути в Thymeleaf

Можем да посочим персонализиран атрибут в HTML таг, използвайки синтаксиса:

th:data-=""

Нека създадем проста форма, която позволява на студента да се регистрира за курс, за да види нещата в действие:


    

Този формуляр съдържа едно падащо меню с наличните курсове и бутон за изпращане.

Да предположим, че искаме да покажем потребителско съобщение за грешка на потребителя, ако кликне върху „Изпращане“, без да избере курс.

Можем да запишем съобщението за грешка като персонализиран атрибут в избрания маркер и да създадем JavaScript функция, за да проверим стойността му при изпращане на формуляра.

Актуализираният таг за избор изглежда по следния начин:

Тук извличаме съобщението за грешка от пакета с ресурси.

Сега, когато потребителят изпрати формуляра, без да избере валидна опция, тази функция на JavaScript ще покаже съобщение за грешка на потребителя:

function validateForm() { var e = document.getElementById("course"); var value = e.options[e.selectedIndex].value; if (value == '') { var error = document.getElementById("errormesg"); error.textContent = e.getAttribute('data-validation-message'); return false; } return true; }

По същия начин можем да добавим множество персонализирани атрибути към HTML тагове, като дефинираме атрибута th: data- * за всеки един от тях.

3. Заключение

В тази кратка статия разгледахме как можем да използваме поддръжката на Thymeleaf за добавяне на персонализирани атрибути в HTML5 шаблони.

Както винаги, работещата версия на този код е достъпна в Github.