객체바인딩, 반복문

thymeleaf 객체 바인딩

- 문법: ${키} model 객체에 담겨진 데이터 반환 
- 1. 태그 속성을 이용한 방식 
<!-- 타임리프 주석 처리 방법 /* */ -->
<!--/* ${memberInfo} */-->

<h1 th:text="${memberInfo}"></h1>
- 2. 표현식을 이용한 방식<br> 
<h1>[[${memberInfo}]]</h1>

 

 

thymeleaf 객체 속성 바인딩

- 1. 도트연산자(.)를 이용한 방식<br>
- 2. 객체 메소드 호출하는 방식<br>
- 3. 객체['키']를 이용한 방식<br>
thymeleaf 바인딩된 객체의 멤버변수 접근 ${키.멤버변수} 
get혹은 set의 카멜표기법 유지시 가능 
<h1 th:text="${memberInfo.memberId}"></h1>
<h1 th:text="${memberInfo.getMemberId()}"></h1>
<h1 th:text="${memberInfo['memberId']}"></h1>

 

 

이스케이프 vs 언이스케이프

- 이스케이프 : HTML에서 사용되는 특수문자를 HTML엔티티로 변경하는 것
 언이스케이프 :  ex:) <script> alert('123') </script> 
이스케이프 :  ex:) &lt;script&gt;alert('123')&lt;/script&gt; 
<input type="text" th:value="${memberInfo.memberId}" readonly="readonly" />
<div th:with="ex=${'한국스마트정보교육원<br>개발자46기'}">
<div th:utext="${ex}"></div>
<div>[(${ex})]</div>
<div th:text="${ex}"></div>
<div>[[${ex}]]</div>
</div>

 

thymeleaf 스크립트에서 data 바인딩

 

<script type="text/javascript" th:inline="javascript">
const memberInfo = [[${memberInfo}]];
console.log(memberInfo)
let memberId = memberInfo.memberId;

// memberId: id001
exam1:47 memberPw: pw001
exam1:47 memberLevel: 관리자
exam1:47 membername: 홍01
exam1:47 memberMobile: 010-1111-1111

//
for(let key in memberInfo){
console.log(`${key}: ${memberInfo[key]}`);
}

 

 

thymeleaf 반복문

  - 태그속성 th:each 
  - 예시 : th:each="약어 : ${루프가능한 객체}" -> th:each=":${memberList}" 
  - 배열, 컬랙션 반복이 이루어질 수 있는 객체 마지막 인덱스 종료시 까지
  - 유효범위 : tag 닫을 때까지

 

<tbody>

<tr th:each="l : ${memberList}">
<td th:text="${l.memberId}"></td>
<td th:text="${l.memberPw}"></td>
<td th:text="${l.memberLevel}"></td>
<td th:text="${l.membername}"></td>
<td>[[${l.memberMobile}]]</td>
</tr>
</tbody>

 

Iteration status 반복가능한 객체의 내부상태 

 <tr th:each="l, 내부상태를 가리키는 변수: ${memberList}"> 
<tr th:each="l, status : ${memberList}">
<td th:text="${status.index}">배열 0번재부터 인덱스반환</td>
<td th:text="${status.count}">배열 행의 번호 반환</td>
<td th:text="${status.size}">배열의 크기 반환</td>

 

단순 반복문 

${#numbers.sequence(초기값,최종값,증감)}"
<div th:each="num : ${#numbers.sequence(1,10,2)}">
<label th:text="${num}"></label>
</div>