Thymeleaf 문법 정리

타임리프 문법 및 표현방법 정리

th:text

th:text는 태그 안에 들어가는 텍스트 값이다.

<span th:text="${eventFvrDtl.winRnkg}"></span>

th:if, th:unless, th:value 

th:if는 if, th:unless는 else 표현이다.

th:value는 태그 안의 value이다.

<th:block th:if="${eventPtcpPsbOrdData != null && #lists.size(eventPtcpPsbOrdData.eventPtcpOrdInfoList) > 0}">
    <input type="hidden" id="ibx_TotalPurAplAmt" th:value="${totalPurAplAmt}"/>
</th:block>
<th:block th:unless="${eventPtcpPsbOrdData != null && #lists.size(eventPtcpPsbOrdData.eventPtcpOrdInfoList) > 0}">
    <input type="hidden" id="ibx_TotalPurAplAmt" value="0"/>
</th:block>  

th:utext (unescaped text)

th:utext는 <div></div>같은 태그형식의 코드를 삽입하고 싶을때 사용한다.

태그형식의 텍스트 들어올시 태그로 인식함.

<!-- HTML 컨텐츠 영역 -->
<th:block th:utext="${#campaignUtils.unescapeHtml(eventDispTempleteInfo.htmlContents)}"></th:block>

th:with

th:with는 변수형태의 값을 재정의한 것이다.

stnmZipNo의 변수를 값이 있다면 정의하고 없다면 공백으로 정의한다.

<th:block th:with="stnmZipNo=${#strings.defaultString(ecCustInfo.stnmZipNo, '')}">
</th:block>

th:switch , th:case

switch case 문과 같다.

fvrDvsCd값이 이럴때 case1, case2 빠지고 

그 외에 것은 th:case=* 로 빠지게 된다. 

<div th:switch="${eventFvrDtl.fvrDvsCd}" class="coupon_gift">
    <p th:case="${#foConstants.FVR_DVS_CD_DISCOUNT}" class="cp cptype02">
        <th:block th:switch="${fvrKnd2Cd}">
            <span th:case="${#foConstants.FVR_KND2_CD_FREE_DLV_CPN}" th:text="${fvrKnd2CdNm}" class="tx"></span>
            <span th:case="*" class="tx">
                <th:block th:text="${fvrKnd2CdNm}"></th:block>
            </span>
        </th:block>
    </p>
    <p th:case="${#foConstants.FVR_DVS_CD_ACCUMULATION}" class="cp cptype02">
        <span class="ty" th:text="${fvrKnd2CdNm}"></span>
        <span class="tx" th:text="${#numbers.formatInteger(eventFvrDtl.fvrDtlCnts, 3, 'COMMA')}"></span>
    </p>
    <p th:case="*" class="cp cptype02">
        <span class="tx" th:text="${eventFvrDtl.fvrDtlCnts}"></span>
    </p>
</div>

th:fagment

include와 비슷하다. 

특정 영역을 가져와서 나타낼 수 있다.

예를 들어 페이지마다 각각의 게시판을 가지고 싶은 경우

포함하는 곳.

ex) eventPage1.html

<th:block th:if="${#lists.size(eventDispTemplateCornerList)} > 0" th:each="eventDispTemplateCorner : ${eventDispTemplateCornerList}">
    <!-- 이벤트 템플릿 코너 -->
    <th:block th:include="${eventDispTemplateCorner.cmpnTmplFileUrl} :: corner (${eventDispTemplateCorner.cmpnNo}, ${eventData.eventBaseInfo.eventPtcpPsbYn})"></th:block>
</th:block>

받는 곳.

ex) board.html

<th:block th:fragment="corner (cmpnNo, eventPtcpPsbYn)">
    <div class="content_title noline">
        <p class="title">게시판</p>
    </div>
</th:block>

controller를 거쳐 화면으로 가져온 데이터를 스크립트로 제어할때

// controller
ModelAndView mv;
mv.addObject("eventData", eventData);
return mv

// controller를 거쳐 화면으로 가져온 데이터를 스크립트로 제어할때
var data1 = [[${eventData}]];
var eventPtcpPsbYn = [[${#strings.defaultString(eventData.eventBaseInfo.eventPtcpPsbYn, 'Y')}]];

태그 안의 attribute를 타임리프로 정의할때 

// 태그 안의 attribute를 타임리프로 정의할때
<div id="myDiv1" th:attr="usemap=|#E_${eventData.eventBaseInfo.cmpnNo}|">
</div>
 
// 정의된 결과
<div id="myDiv1" usemap="#E_21082">
</div>