Thymeleaf使用th:attr設定html標籤屬性。
參考「Spring Boot Thymeleaf 簡單範例」搭建好Spring Boot Thymeleaf專案，下面以此進行修改。
Html標籤屬性的值是靜態的，例如下面<input>的屬性value及disabled的值設定後皆無法變動。
<input type="text" value="John" disabled="disabled"/>
而thymeleaf模板可透過th:attr搭配thymeleaf表示式動態設定標籤屬性的值。
例如下面hello.html模板中的<input>的value及disabled屬性是改用th:attr來設定，多個屬性使用逗號分隔，並搭配變數表示式${...}動態設定屬性的值。
value的值來自變數name；
disabled的值來自變數disabled。
hello.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>
<p th:text="'Hello, ' + ${name} + '!'"/>
<input type="text" th:attr="value=${name}, disabled=${disabled}" />
</body>
</html>
在導向hello.html的DemoController.hello()設定屬性變數"name"及"disabled"如下。
DemoController
package com.abc.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class DemoController {
@GetMapping("/hello")
public String hello(
@RequestParam(name = "name", required = false, defaultValue = "World") String name,
Model model) {
model.addAttribute("name", name);
model.addAttribute("disabled", true);
return "hello"; // forward to hello.html
}
}
啟動專案在瀏覽器輸入http://localhost:8080/demo/hello所回應的hello.html經thymeleaf解析的結果如下，可以看到<input>的value及disabled屬性值皆被替換為在DemoController.hello()設定的變數值。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Thymeleaf</title>
</head>
<body>
<p>Hello, World!</p>
<input type="text" value="World" disabled="disabled">
</body>
</html>
此外也能使用th:[attrname]設定標籤指定屬性的值。
沒有留言:
張貼留言