Mục lục

Biến (Variable) trong Thymeleaf

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

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

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: