markdown-it
demo
Delete
Submit
clear
permalink
### [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>` 內容。
html
source
debug
Fork me on GitHub