타임리프 자바스크립트 인라인 이용하기
자바스크립트에서 타임리프 태그를 사용하기 위해서는 th:inline="javascript"
를 적용하여 사용한다.
1
<script type="text/javascript" th:inline="javascript">
인라인을 종료하여 타임리프 태그가 작동되지 않도록 하려면 th:inline=”none”을 이용한다.
모델 객체를 자동으로 json 객체로 변환
[[${session}]]
로 객체를 호출하면 타임리프가 자동으로 json 객체로 변환하여 준다.
아래 샘플에서 /*[[${session}]]*/
를 이용하는 것과 [[${session}]]
를 이용하는 것의 차이는 session2
선언부는 자바스크립트 문법을 깨트리기 때문에 소스 html 파일을 웹브라우저에서 바로 오픈하면 스크립트가 실행되지 않는다.
1
2
var session1 = /*[[${session}]]*/ null;
var session2 = [[${session}]];
/*[[${...}]]*/
형식은 자바스크립 문법상 주석에 해당하기 때문에 문제가 없다. 웹브라우저에서 바로 오픈하면 다음과 같은 코드로 해석될 것이다.
1
var session = null;
웹서버에서 실행되어 타임리프가 ${session}
을 자동으로 json 객체로 변화하면 다음과 같은 코드가 생성된다.
1
var session = {"\uC601\uC5B4\uC774\uB984":"TtalLaeMideul","name":"\uB538\uB0B4\uBBF8\uB4E4","key_x":"from session"};
자바스크립트 내에서 타임리프 태그 이용하기
[# th:...]
로 시작하여 [/]
로 닫힌 내부에서 타임리프 태그를 이용할 수 있다.
아래 소스는 ${DEBUG_MODE}
의 값이 true
이면 로그를 찍는 코드이다.
1
2
3
4
5
6
7
<script type="text/javascript" th:inline="javascript">
var session = /*[[${session}]]*/ null;
[# th:if="${DEBUG_MODE}"]
console.log('session', session);
[/]
</script>
샘플 코드
아래 샘플 소스코드에서 이 문서에서 설명한 소스를 확인할 수 있다. 프로젝트를 받아서 직접 빌드하여 실행하고 결과를 확인해보면 도움이 될 것이다.