1. 개요

이 빠른 사용방법(예제)에서는 Thymeleaf에서 CSS 클래스를 조건부로 추가하는 몇 가지 다른 방법을 배웁니다.

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이 제공되기 전에 서버가 조건을 평가하고 condition-true 클래스 또는 condition-false 클래스와 기본 클래스 를 포함 할 수있는 좋은 방법이 필요합니다 .

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 사용

일 : 클래스 속성에 대한 바로 가기입니다 일 : ATTR = "클래스 = ..." 그래서는 분리와 함께 대신 사용할 수 있도록 기본 조건 결과에서 클래스를 :

<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>

이 솔루션은 우리의 요구를 충족하고 DRY이기 때문에 꽤 좋습니다. 그러나 우리가 혜택을 볼 수있는 또 다른 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 코드와 관심사 분리의 최상의 조합 을 제공 하는 동시에 목표를 충족 할 수 있음을 발견했습니다 .

이러한 모든 예제는 GitHub에서 사용할 수있는 작동중인 Thymeleaf 프로젝트에서 볼 수 있습니다 .