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