Biến (Variable) vs Toán tử trong Thymeleaf

Posted by

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)
1
2
3
4
5
6
7
8
9
10
11
@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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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)
1
2
3
4
5
6
7
8
9
10
@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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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)
1
2
3
4
5
6
7
8
9
10
11
@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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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>

1- Toán tử Elvis

Hầu hết các ngôn ngữ lập trình máy tính đều hỗ trợ toán tử Elvis, dưới đây là cú pháp tiêu chuẩn của toán tử Elvis trong Thymeleaf:
1
<p th:utext="${myVariable} ? ${myValue1} : ${myValue2}"></p>
  • Nếu myVariable được đánh giá là true, mã ở trên tương đương với <p th:utext=”${myValue1}”></p>.
  • Nếu myVariable được đánh giá là false, mã ở trên tương đương với <p th:utext=”${myValue2}”></p>.
Chú ý: Trong Thymeleaf một biến (Hoặc một điều kiện) được đánh giá là false (sai) nếu giá trị của nó là null, false, 0, “false”, “off”, “no”. Ngược lại, nó được đánh giá là true (đúng).
Ví dụ:
1
2
<h2 th:utext="${user} ?  ${user.userName} : 'You are not logged in' }"></h2>
Nếu bắt gặp một đoạn mã giống dưới đây, bạn có thể viết nó ngắn gọn hơn:
1
2
3
4
5
<p th:utext="${myVariable} ? ${myVariable} : ${myValue2}"></p>
<!-- Write shorter: -->
<p th:utext="${myVariable} ?: ${myValue2}"></p>
Ví dụ:
1
2
3
4
5
6
7
8
9
10
11
<!-- Example -->
<div th:utext="${errorMessage} ?:  'No error!' "></div>
<!-- Example -->
<div th:object="${user}">
  ...
  <p>Age: <span th:text="*{age}?: '(no age specified)'">27</span>.</p>
</div>
Toán tử Elvis lồng nhau:
1
2
3
4
5
<span th:utext="${myVariable1} ? ${myValue1} : (${myVariable2} ? ${myValue21} : ${myValue22}) }"></span>
<!--
Other example ....
-->

Nguon: openplanning.net

Leave a Reply

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *