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

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

 

th:text

 

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

 

1

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

cs

 

 

th:if, th:unless, th:value 

 

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

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

 

1 2 3 4 5 6

<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>   Colored by Color Scripter

cs

 

th:utext (unescaped text)

 

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

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

 

1 2

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

cs

 

 

 

th:with

 

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

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

 

1 2

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

cs

 

th:switch , th:case

 

switch case 문과 같다.

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

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

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<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> Colored by Color Scripter

cs

 

th:fagment

 

include와 비슷하다. 

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

 

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

 

포함하는 곳.

ex) eventPage1.html

 

1 2 3 4

<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> Colored by Color Scripter

cs

 

받는 곳.

ex) board.html

 

1 2 3 4 5

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

cs

 

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

 

1 2 3 4

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

cs

 

1 2 3

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

cs

 

 

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

 

1 2 3 4 5 6 7

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

cs

 

 

출처: https://shlee0882.tistory.com/134