728x90
자바스크립트 inline 사용
Controller
@GetMapping("/javascript")
public String javascript(Model model) {
model.addAttribute("user", new User("UserA", 10));
addUsers(model);
return "basic/javascript";
}HTML
객체는 JSON으로 넣어준다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 자바스크립트 인라인 사용 전 -->
<script>
var username = [[${user.username}]];
var age = [[${user.age}]];
//자바스크립트 내추럴 템플릿
var username2 = /*[[${user.username}]]*/ "test username";
//객체
var user = [[${user}]];
</script>
<!-- 자바스크립트 인라인 사용 후 -->
<script th:inline="javascript">
var username = [[${user.username}]];
var age = [[${user.age}]];
//자바스크립트 내추럴 템플릿
var username2 = /*[[${user.username}]]*/ "test username";
//객체
var user = [[${user}]];
</script>
<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
[# th:each="user, stat : ${users}"]
var user[[${stat.count}]] = [[${user}]];
[/]
</script>
</body>
</html>
728x90
'백엔드 > 타임리프' 카테고리의 다른 글
| 타임리프 입력 폼 처리 (0) | 2021.09.14 |
|---|---|
| 템플릿 (0) | 2021.09.13 |
| 타임리프 block (0) | 2021.09.12 |
| 타임리프 주석 (0) | 2021.09.12 |
| 타임리프 조건식(if, unless, switch) (0) | 2021.09.12 |
