Работа с пользовательскими атрибутами 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 .