Thymeleaf 문법 정리
타임리프 문법 및 표현방법 정리하기
1. th:text
th:text는 태그 안에 들어가는 텍스트 값임.
|
1
2
3
|
<span th:text="${userInfo.userName}"></span>
|
2. th:if, th:unless, th:value
th:if는 if, th:unless는 else 표현이다. th:value는 태그 안의 value임. if의 조건이 맞으면 아래의 input 태그가 보인다.
|
1
2
3
4
5
6
|
<th:block th:if="${userData != null && #Lists.size(userData.userLiist) > 0}">
<input type="hidden" id="userDataCnt" th:value="${userDataInfoCnt}"/>
</th:block>
<th:block th:unless="${userData != null && #Lists.size(userData.userLiist) > 0}">
<input type="hidden" id="userDataCnt" value="0"/>
</th:block>
|
3. th:utext (unescaped text)
th:utext는 <span></span>같은 태그형식의 코드를 삽입하고 싶을때 사용함. 태그형식의 텍스트 들어올시 태그로 인식함.
|
1
2
|
<!-- HTML 컨텐츠 영역 -->
<th:block th:utext="${#campaignUtils.unescapeHtml(htmlInfo.htmlContents)}"></th:block
|
4.th:with
th:with는 변수형태의 값을 재정의한 것이다. memberIdx의 변수를 값이 있다면 정의하고 없다면 공백으로 정의함.
|
1
2
|
<th:block th:with="memberIdx=${#strings.defaultString(memberInfo.memberIdx, '')}">
</th:block>
|
5.th:switch , th:case
switch case 문과 같다. typeCd 값이 이럴때 case1, case2 빠지고 그 외에 것은 th:case=* 로 빠지게 됨.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<div th:switch="${bbsInfo.typeCd}" class="event_gift">
<p th:case="${#constants.CD_DISCOUNT}" class="evt evttype02">
<th:block th:switch="${kndCd}">
<span th:case="${#constants.FREE_CPN}" th:text="${kndCdNm}" class="tx"></span>
<span th:case="*" class="tx">
<th:block th:text="${kndCdNm}"></th:block>
</span>
</th:block>
</p>
<p th:case="${#constants.CD_ACCUMULATION}" class="evt evttype02">
<span class="ty" th:text="${kndCdNm}"></span>
<span class="tx" th:text="${#numbers.formatInteger(bbsInfo.dtlCnts, 3, 'COMMA')}"></span>
</p>
<p th:case="*" class="evt evttype02">
<span class="tx" th:text="${bbsInfo.dtlCnts}"></span>
</p>
</div>
|
6. th:fagment
include와 비슷함. 특정 영역을 가져와서 나타낼 수 있음.
예를 들어 페이지마다 각각의 게시판을 가지고 싶은 경우
포함하는 페이지
ex) bbsPage.html
|
1
2
3
4
|
<th:block th:if="${#Lists.size(bbsTemplateCornerList)} > 0" th:each="bbsTemplateCorner : ${bbsTemplateCornerList}">
<!-- 게시판 템플릿 코너 -->
<th:block th:include="${bbsTemplateCorner.bbsFileUrl} :: corner (${bbsTemplateCorner.bbsNo}, ${bbsData.bbsInfo.bbsDelYn})"></th:block>
</th:block>
|
받는 페이지
ex) bbs.html
|
1
2
3
4
5
6
|
<th:block th:fragment="corner (bbsNo, bbsDelYn)">
<div class="content_title noline">
<p class="title">게시판</p>
</div>
</th:block>
|
7. controller를 거쳐 화면으로 가져온 데이터(Object)를 스크립트로 제어하기
|
1
2
3
4
5
|
// controller
ModelAndView mv;
mv.addObject("bbsData", bbsData);
return mv
|
|
1
2
3
4
|
// controller를 거쳐 화면으로 가져온 데이터를 스크립트로 제어하기
var data = [[${bbsData}]];
var bbsDelYn = [[${#strings.defaultString(bbsData.bbsInfo.bbsDelYn, 'Y')}]];
|
8. 태그 안의 attribute를 타임리프로 정의할때
|
1
2
3
4
5
6
7
|
// 태그 안의 attribute를 Thymeleaf로 정의할때
<div id="setDiv" th:attr="usemap=|#VALUE_${bbsData.bbsInfo.bbsNo}|">
</div>
// 정의된 결과
<div id="setDiv" usemap="#VALUE_1234">
</div>
|
타임리프에서 제공하는 temporals 메서드를 사용. 만약에 오류가난다면 jar를 추가해야한다.
|
1
|
<td th:text="${#temporals.createDate(bbsInfo.regDate, 'yyyyMMdd')}"></td>
|
10. select 에서의 사용
|
1
2
3
|
<select class="form-control" id="goods" name="goods">
<option th:each="goodList : ${goodList}" th:value="${goodList.code}" th:text="${goodList.name}"></option>
</select>
|
서버에서 받은 object를 each문법으로 간단하게 셀렉트 옵션을 생성 할 수 있다.