Biến (Variable) trong Thymeleaf

Xem thêm các chuyên mục:

Các hướng dẫn Thymeleaf

Biến (Variable)

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

1- Biến (Variable)

Bạn không xa lạ gì với khái niệm biến (variable) trong ngôn ngữ Java. Nhưng trong Thymeleaf thì sao? Tất nhiên, Thymeleaf cũng có khái niệm về biến.

Một thuộc tính (attribute) của đối tượng org.springframework.ui.Model, hoặc một thuộc tính (attribute) của đối tượng HttpServletRequest chính là một biến của Thymeleaf, biến này có thể được sử dụng mọi nơi trong Template.

(Java Spring)


@RequestMapping("/variable-example1")
public String variableExample1(Model model, HttpServletRequest request) {
    // variable1
    model.addAttribute("variable1", "Value of variable1!");
    // variable2
    request.setAttribute("variable2", "Value of variable2!");
    return "variable-example1";
}

variable-example1.html


<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <meta charset="UTF-8" />
      <title>Variable</title>
   </head>
   <body>
       <h1>Variables</h1>
       <h4>${variable1}</h4>
       <span th:utext="${variable1}"></span>
       <h4>${variable2}</h4>
       <span th:utext="${variable2}"></span>
   </body>
</html>

Local Variables

Bạn có thể định nghĩa các biến trong Template, chúng là các biến địa phương (local), chúng chỉ tồn tại và khả dụng trong một đoạn (section) của Template.

Trong ví dụ này, 2 biến flower, iter chỉ tồn tại và khả dụng bên trong vòng lặp đã khai báo ra chúng.

(Java Spring)


@RequestMapping("/variable-in-loop")
public String objectServletContext(Model model, HttpServletRequest request) {
    String[] flowers = new String[] {"Rose","Lily", "Tulip", "Carnation", "Hyacinth" }; 
    model.addAttribute("flowers", flowers);
    return "variable-in-loop";
}

variable-in-loop.html


<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" />
  <title>Variable</title>
</head>
<body>
    <h1>Variable: flower, iter</h1>
    <table border="1">
        <tr>
            <th>No</th>
            <th>Flower Name</th>
        </tr>
        <!--
             Local Variable: flower
             Local Variable: iter (Iterator).
           -->
        <tr th:each="flower, iter : ${flowers}">
            <td th:utext="${iter.count}">No</td>
            <td th:utext="${flower}">Flower Name</td>
        </tr>
    </table> 
</body>
</html>

th:with

Bạn cũng có thể tạo một hoặc nhiều biến địa phương thông qua thuộc tính (attribute) th:with. Cú pháp của nó giống như một biểu thức gán giá trị thông thường.

(Java Spring)


@RequestMapping("/variable-example3")
public String variableExample3(Model model) {
    String[] flowers = new String[] {"Rose","Lily", "Tulip", "Carnation", "Hyacinth" };
    model.addAttribute("flowers", flowers);
    return "variable-example3";
}

variable-example3.html


<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" />
  <title>Variable</title>
</head>
<body>
    <h1>th:with</h1>
    <!-- Local variable: flower0 -->
    <div th:with="flower0 = ${flowers[0]}">
       <h4>${flower0}</h4>
       <span th:utext="${flower0}"></span>
    </div>
    
    <!-- Local variable: flower1, flower2 -->
    <div th:with="flower1 = ${flowers[1]}, flower2 = ${flowers[2]}">
       <h4>${flower1}, ${flower2}</h4>
       <span th:utext="${flower1}"></span>
       <br/>
       <span th:utext="${flower2}"></span>
    </div>
    <hr>
    <!-- Local variable: firstName, lastName, fullName -->
    <div th:with="firstName = 'James', lastName = 'Smith', fullName = ${firstName} +' ' + ${lastName}">
         First Name: <span th:utext="${firstName}"></span>
         <br>
         Last Name: <span th:utext="${lastName}"></span>
         <br>
         Full Name: <span th:utext="${fullName}"></span>
    </div>
</body>
</html>

Ví dụ, tạo một mảng (array) trong Thymeleaf:

variable-array-example.html (Template)


<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" />
  <title>Variable</title>
</head>
<body>
    <h1>th:with (Array)</h1>
     <!-- Create an Array: -->
    <th:block th:with="flowers = ${ {'Rose', 'Lily', 'Tulip'} }">
        <table border="1">
            <tr>
                <th>No</th>
                <th>Flower</th>
            </tr>
            <tr th:each="flower, state : ${flowers}">
                <td th:utext="${state.count}">No</td>
                <td th:utext="${flower}">Flower</td>
            </tr>
        </table>
    </th:block>
</body>
</html>

Xem thêm các chuyên mục:

Các hướng dẫn Thymeleaf