자바스크립트에서 타임리프 사용하기 (+onclick 인자 전달)

자바스크립트에서 타임리프 변수를 사용하기 위해선 다음과 같이 하면 된다. 

 

<script th:inline="javascript">

....
//변수 사용시
[[${변수명}]]

</script>

 

만일 fragment 형식으로 페이지 구성을 할 경우, fragment 에서 스크립트를 추가 해도, 메인페이지에 추가 안될 수가 있다.

 

메인페이지에서 div 태그에 th:replace 를 이용하여 fragment를 호출 할 경우, 단순히 div 태그 역할을 하기 때문이다.

 

이럴경우 메인페이지 쪽에 javascript를 작성하든지, header fragment를 만든 후 javascript를 작성하고, header를 치환 하든지 해야 한다. 

 

• onclick에 타임리프 인자 전달하기
  • 태그에 커스텀 어트리뷰트 생성
    • th:어트리뷰트명="${타임리프 변수명}"
  • onclick 인자로 전달
    • onclick = "함수명(this.getAttribute('어트리뷰트명'))"

 

//타임리프 변수명이 val1 이라고 가정하고, 클릭 함수명을 func1 이라고 가정한다. 
//커스텀 어트리뷰트 명은 attr1 이라고 가정한다. 


.....
<button th:attr1="${val1}" onclick="func1(this.getAttribute('attr1'))" />

....