타임리프 (Thymeleaf) 정리 (2)

5 Setting Attribute Values

* 속성의 값을 설정할 수 있음
<form action="subscribe.html" th:attr="action=@{/subscribe}">
: action 속성값을 설정

* 콤마(,)로 구분하여 여러개의 속성값을 한번에 설정이 가능함
<img src="../../images/gtvglogo.png" th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />
: src, title, alt 속성값을 설정

* th:attr="속성명=값"의 형태를 간단하게 th:속성명="값" 형태로 사용 가능함
<form action="subscribe.html" th:action="@{/subscribe}">

* 축약해서 사용할 수 있는 속성명들이 많으므로 Thymeleaf 3.0 문서의 31p 참조할 것
th:abbr
th:accept
th:accept-charset
th:accesskey
th:action
th:align
... 생략

* 여러 속성의 값을 하나의 값으로 설정이 가능함
<img src="../../images/gtvglogo.png" th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />
: th:attr="속성명=값"의 형태로 축약하면 아래와 같이 나타낼 수 있음
<img src="../../images/gtvglogo.png" th:src="@{/images/gtvglogo.png}" th:title="#{logo}" th:alt="#{logo}" />
: title, alt 속성의 설정값이 동일하므로 아래와 같이 하나로 표현이 가능함
<img src="../../images/gtvglogo.png" th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" />

* 기존 속성의 값을 유지하며 새로운 값을 추가 (th:attrappend, th:attrprepend)
<input type="button" value="Do it!" class="btn" th:attrappend="class=${' ' + cssStyle}" />
: th:attrappend는 기존 속성 값의 뒤에 새로운 값을 추가. ${cssStyle}에 "warning"이 설정되어 있다면 아래와 같은 형태가 됨
: th:attrprepend는 기존 속성 값의 앞에 새로운 값을 추가
<input type="button" value="Do it!" class="btn warning" />

* CSS class 속성과 style 속성을 위해 th:classappend, th:styleappend가 있으므로 아래처럼 사용 가능
<tr class="row" th:classappend="${prodStat.odd}? 'odd'">
: ${prodStat.odd}에 설정된 값이 null이 아니면 'odd' 추가함. 아래와 같은 형태가 됨
<tr class="row odd">

* 체크박스 등의 true값 설정이 가능함
<input type="checkbox" name="option2" checked /> <!-- HTML -->
: HTML의 경우 체크박스에 체크가 된 경우 "true" 값이 설정되어 있음
<input type="checkbox" name="option1" checked="checked" /> <!-- XHTML -->
: XHTML의 경우 체크박스에 체크가 된 경우 특정 값을 설정할 수 있음
<input type="checkbox" name="active" th:checked="${user.active}" />
: 타임리프에서는 th:checked="값" 형식으로 설정이 가능

th:async	th:autofocus	th:autoplay
th:checked	th:controls	th:declare
th:default	th:defer	th:disabled
th:formnovalidate	th:hidden	th:ismap
th:loop	th:multiple	th:novalidate
th:nowrap	th:open	th:pubdate
th:readonly	th:required	th:reversed
th:scoped	th:seamless	th:selected

---

6 Iteration

* th:each

<tr th:each="prod : ${prods}">
    <td th:text="${prod.name}">Onions</td>
    <td th:text="${prod.price}">2.41</td>
    <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>

<tr th:each="prod : ${prods}">
: prods - 반복된 변수(공식문서에는 the iterated expression or iterated variable), prod - 반복변수(공식문서에는 the iteration variable or simply iter variable). prods를 리스트, prod를 리스트에 속한 아이템으로 생각하면 됨.
: prod는 하위 태그에서도 사용이 가능하므로 위 예제의 경우 <td>에서 사용 가능함을 볼 수 있음

* 상태변수(the status variable)를 제공함

<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
    <td th:text="${prod.name}">Onions</td>
    <td th:text="${prod.price}">2.41</td>
    <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>

<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
: 상태변수는 반복변수와 콤마(,)로 구분하고 반복변수 다음에 명시함. 상태변수를 명시하지 않을 경우 반복변수 명칭 + "Stat" 형태로 존재함
<tr th:each="prod : ${prods}" th:class="${iterStat.odd}? 'odd'">
: 상태변수를 명시하지 않았지만 prodStat를 사용할 수 있음
: 상태변수는 다음과 같은 데이터를 가지고 있음. 상태변수.index 이런 형태로 사용 가능함

index	0부터 시작하는 index
count	1부터 시작하는 index
size	반복된 변수의 총 갯수
current	반복변수
even or odd	반복변수가 짝수번째인지 홀수번째인지 여부
first	반복변수가 첫번째인지 여부
last	반복변수가 마지막인지 여부

---

7 조건문 (Conditional Evaluation)

* th:if
: th:if 값이 true인 경우 해당 태그를 실행함(랜더링함)

// prod.comments 값이 있는 경우 <a>태그를 랜더링함 
<a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}" th:if="${not #lists.isEmpty(prod.comments)}">view</a>

* 값이 true인 경우는 아래와 같음

• 값이 null이 아닌 경우
  • 값이 boolean 타입이고 true 인 경우 - true
  • 값이 number 타입이고 0이 아닌 경우 - true
  • 값이 character 타입이고 0이 아닌 경우 - true
  • 값이 String 타입이고 “false”, “off” 혹은 “no”가 아닌 경우 - true
  • 값이 boolean, number, character, String 타입이 아닌 경우 - true
• 값이 null인 경우 - false

* th:unless
: th:if와 반대임

* th:switch

<div th:switch="${user.role}">
    <p th:case="'admin'">User is an administrator</p>
    <p th:case="#{roles.manager}">User is a manager</p>
    <p th:case="*">User is some other thing</p>
</div>

: th:switch의 값이 th:case 값 중 일치하는 태그 실행
: 기본값은 th:case="*"로 표현함

 

10 속성 우선순위 (Attribute Precedence)