網頁

▼

2021/5/22

Spring Boot Thymeleaf 使用th:attr設定標籤屬性 setting element attributes

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]設定標籤指定屬性的值。


沒有留言:

張貼留言