### [Setting up a JavaScript variable from Spring model by using Thymeleaf](https://stackoverflow.com/questions/25687816/setting-up-a-javascript-variable-from-spring-model-by-using-thymeleaf)
```js
var message = [[${message}]];
```
### [Spring Boot Thymeleaf 取代頁面片段 replace page fragment](https://matthung0807.blogspot.com/2021/05/spring-boot-thymeleaf-replace-page-fragment.html)
home.html
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<div th:fragment="header">
<h1>Thymeleaf Basic Include Demo</h1>
</div>
<div>
<p th:text="'Hello, ' + ${name} + '!'"/>
</div>
<div th:fragment="footer">
Copyright © 2022 some reserved.
</div>
</body>
</html>
```
another.html
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Hello Thymeleaf</title>
</head>
<body>
<div th:replace="home :: header">Header</div>
<div>
<p th:text="'Hello, ' + ${name} + '!'"/>
</div>
<div th:replace="home :: footer">Footer</div>
</body>
</html>
```
th:if 及 th:unless 顯示不同區塊
若 voted 為空則顯示投票方式，若非空則顯示已完成
```html
<div class = "card-body" th:if="${voted == null}">
<div>排出你心目中的優先順序</div>
<div>分數計算方式：第一順位得3票，第二順位得2票，第三順位得1票</div>
<form id="frm" method="post">
<ul id="sortable" class="list-group list-group-flush">
<li class="list-group-item"
th:id="${content.id}" th:text="${content.text}" th:each="content : ${candidates}"></li>
</ul>
<input type="hidden" name="position" id="position" />
</form>
<button id="btnSubmit" class="btn btn-primary mx-auto my-3" type="submit">Send</button>
</div>
<div class = "card-body" th:unless="${voted == null}">
<div>你已完成投票！</div>
<div th:text="'投票的優先順序為：' + ${voted}"></div>
</div>
```
### JavaScript 使用 Model Attribute
```java
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class MyController {
@GetMapping("/my-page")
public String myPage(Model model) {
MyObject myObject = new MyObject("John", 30);
model.addAttribute("myObject", myObject);
return "my-page"; // 返回 Thymeleaf 模板的名稱
}
}
```
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>My Page</title>
</head>
<body>
<script th:inline="javascript">
var myObject = /*[[${myObject}]]*/ null; // 將物件傳給 JavaScript 變數
console.log(myObject.name); // 使用物件的屬性
console.log(myObject.age);
</script>
</body>
</html>
```
### 動態改變 title 內容
在 Spring Boot 中使用 Thymeleaf 動態更改 `<title>` 內容可以透過模板引擎的屬性處理。
以下是一個簡單的例子，演示如何在 Thymeleaf 中動態更改 `<title>` 內容：
1. 在 HTML 文件的 `<head>` 標籤中使用 Thymeleaf 的 `th:text` 屬性設定 `<title>` 內容。
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title th:text="${pageTitle}">Default Title</title>
</head>
<body>
<!-- Your content here -->
</body>
</html>
```
2. 在你的 Spring Boot 控制器中，設定 `pageTitle` 的值。這樣就可以動態更改 `<title>` 的內容。
```java
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class YourController {
@GetMapping("/your-page")
public String yourPage(Model model) {
model.addAttribute("pageTitle", "Your Page Title");
return "your-page-template"; // 返回你的 Thymeleaf 模板名稱
}
}
```
在這個例子中，當訪問 `/your-page` 路徑時，`Your Page Title` 將會動態更改為 `<title>` 的內容。請確保你在 Spring Boot 控制器中設置了正確的模型屬性以便 Thymeleaf 能夠正確地解析和顯示 `<title>` 內容。