1. Обзор
В этом кратком руководстве мы узнаем несколько различных способов условного добавления классов CSS в Thymeleaf.
Если вы не знакомы с Thymeleaf, мы рекомендуем проверить наше введение в него.
2. Использование th:если
Предположим, что наша цель состоит в том, чтобы сгенерировать классы которого определяются сервером:
I have two classes: "base" and either "condition-true" or "condition-false" depending on a server-side condition.
Прежде чем этот HTML будет подан, нам нужен хороший способ для сервера оценить условие и либо включить condition-true класс, либо condition-false класс, а также базовый класс.
При создании шаблонов HTML довольно часто требуется добавить некоторую условную логику для динамического поведения.
Во-первых, давайте использовать th:if для демонстрации простейшей формы условной логики:
This HTML is duplicated. We probably want a better solution. This HTML is duplicated. We probably want a better solution.
Здесь мы видим, что это логически приведет к тому, что правильный класс CSS будет прикреплен к нашему HTML-элементу, но это решение нарушает принцип DRY , поскольку требует дублирования всего блока кода.
Использование th:if , безусловно, может быть полезно в некоторых случаях, но мы должны искать другой способ динамического добавления класса CSS.
3. Использование th:attr
Thymeleaf предлагает нам атрибут, который позволит нам определить другие атрибуты, называемые th:attr .
Давайте использовать его для решения нашей проблемы:
This HTML is consolidated, which is good, but the Thymeleaf attribute still has some redundancy in it.
Возможно, вы заметили, что класс base все еще дублируется. Кроме того, существует более конкретный атрибут Thymeleaf, который мы можем использовать при определении классов.
4. Использование класса th:
Атрибут th:class является ярлыком для th:attr=”class=…” поэтому давайте использовать его вместо этого, а также отделять базовый класс от результата условия:
The base CSS class still has to be appended with String concatenation. We can do a little bit better.
Это решение довольно хорошее, потому что оно отвечает нашим потребностям и является СУХИМ. Тем не менее, есть еще один атрибут Thymeleaf, от которого мы можем извлечь выгоду.
5. Использование th:classappend
Не было бы неплохо полностью отделить наш базовый класс от условной логики? Мы можем статически определить наш базовый класс и свести условную логику только к соответствующим частям:
This HTML is consolidated, and the conditional class is appended separately from the static base class.
6. Заключение
С каждой итерацией нашего кода Thymeleaf мы узнавали о полезной условной технике, которая может пригодиться позже. В конечном счете, мы обнаружили, что использование th:classappend обеспечивает нам наилучшую комбинацию СУХОГО кода и разделения проблем, а также удовлетворяет нашей цели.
Все эти примеры можно увидеть в рабочем проекте Thymeleaf, доступном на GitHub .