Работа с пользовательскими атрибутами HTML в Thymeleaf
1. обзор
В этом руководстве мы рассмотрим, как мы можем определять пользовательские атрибуты в тегах HTML5, используя Thymeleaf. Это механизм шаблонизатора, который позволяет использовать обычный HTML для отображения динамических данных.
Для вводной статьи о Thymeleaf или его интеграции со Spring обратитесь к этомуlink.
2. Пользовательские атрибуты в HTML5
Иногда нам может потребоваться дополнительная информация на страницах HTML, чтобы выполнить некоторую обработку на стороне клиента. Например, мы можем захотеть сохранить дополнительные данные в тегахforminput, чтобы мы могли использовать их при отправке формы с помощью AJAX.
Аналогичным образом, мы можем захотеть отображать пользовательские сообщения об ошибках проверки пользователю, заполняющему форму.
В любом случаеwe can supply this additional data by using HTML 5’s custom attributes. Custom attributes can be defined in an HTML tag using the data- prefix.
Теперь давайте посмотрим, как мы можем определить эти атрибуты, используя диалект по умолчанию в Thymeleaf.
3. Пользовательские атрибуты HTML в Thymeleaf
Мы можем указать настраиваемый атрибут в теге HTML, используя синтаксис:
th:data-="" Давайте создадим простую форму, которая позволит студенту зарегистрироваться на курс, чтобы увидеть, как все работает:
Эта форма содержит один выпадающий список доступных курсов и кнопку отправки.
Допустим, мы хотим показать пользователю настраиваемое сообщение об ошибке, если он нажмет на «Отправить», не выбрав курс.
Мы можем сохранить сообщение об ошибке как настраиваемый атрибут в тегеselect и создать функцию JavaScript для проверки ее значения при отправке формы.
Обновленный тегselect выглядит примерно так:
Здесь мы получаем сообщение об ошибке из набора ресурсов.
Теперь, когда пользователь отправляет форму без выбора допустимой опции, эта функция 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.
Как всегда доступна рабочая версия этого кодаover on Github.