1. Sơ lược

Trong hướng dẫn nhanh này, chúng ta sẽ xem cách chúng ta có thể sử dụng các mảng trong Thymeleaf. Để dễ dàng thiết lập, chúng tôi sẽ sử dụng trình khởi động spring-boot để khởi động ứng dụng của chúng tôi.
Thông tin cơ bản về Spring MVC và Thymeleaf có thể được tìm thấy tại đây

2. Thymeleaf Dependency

Trong tệp pom.xml của chúng tôi , các dependency duy nhất mà chúng tôi cần thêm là SpringMVC và Thymeleaf:

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
</dependency>

3. The Controller

Để đơn giản, hãy sử dụng controller chỉ có một phương thức xử lý các yêu cầu GET .
Điều này phản hồi bằng cách truyền một mảng cho model object sẽ làm cho nó có thể truy cập được vào dạng view:

@Controller
public class ThymeleafArrayController {

   @GetMapping("/arrays")
   public String arrayController(Model model) {
       String[] continents = {
         "Africa", "Antarctica", "Asia", "Australia", 
         "Europe", "North America", "Sourth America"
       };
       
       model.addAttribute("continents", continents);

       return "continents";
   }
}

4. The View

Trong trang view, chúng ta sẽ truy cập các continents mảng bằng tên mà chúng ta chuyển nó với (continents) từ controller của chúng ta ở trên .

4.1. Thuộc tính và chỉ mục

Một trong những thuộc tính đầu tiên mà chúng ta sẽ kiểm tra là độ dài của mảng. Đây là cách chúng tôi có thể kiểm tra nó:

<p>...<span th:text="${continents.length}"></span>...</p>

Và nhìn vào đoạn mã ở trên, từ trang view, chúng ta sẽ thấy việc sử dụng từ khóa th: text . Chúng tôi đã sử dụng nó để in giá trị của biến bên trong dấu ngoặc nhọn, trong trường hợp này là độ dài của mảng.

Do đó,chúng tôi truy cập giá trị của từng phần tử của mảng continents bằng chỉ mục của nó giống như chúng tôi sử dụng để làm trong mã Java thông thường của chúng tôi:

<ol>
   <li th:text="${continents[2]}"></li>
   <li th:text="${continents[0]}"></li>
   <li th:text="${continents[4]}"></li>
   <li th:text="${continents[5]}"></li>
   <li th:text="${continents[6]}"></li>
   <li th:text="${continents[3]}"></li>
   <li th:text="${continents[1]}"></li>
</ol>

Như chúng ta đã thấy trong đoạn mã trên, mỗi phần tử đều có thể truy cập được thông qua chỉ mục của nó. Chúng ta có thể vào đây để tìm hiểu thêm về các biểu thức trong Thymeleaf .

4.2. Sự lặp lại

Tương tự chúng ta có thể lặp lại tuần tự các phần tử của mảng.
Trong Thymeleaf, đây là cách chúng tôi có thể đạt được điều đó:

<ul th:each="continet : ${continents}">
   <li th:text="${continent}"></li>
</ul>

Khi sử dụng th: mỗi từ khóa để lặp qua phần tử của một mảng , chúng tôi không bị hạn chế chỉ sử dụng các thẻ danh sách. Chúng tôi có thể sử dụng bất kỳ thẻ HTML nào có khả năng hiển thị văn bản trên trang. Ví dụ:

<h4 th:each="continent : ${continents}" th:text="${continent}"></h4>

Trong đoạn mã trên, mỗi phần tử sẽ được hiển thị trên thẻ

riêng biệt của nó .

4.3. Các chức năng tiện ích

Cuối cùng, chúng ta sẽ sử dụng các hàm của lớp tiện ích để kiểm tra một số thuộc tính khác của mảng.
Chúng ta hãy xem xét điều này:

<p>The greatest <span th:text="${#arrays.length(continents)}"></span> continents.</p>

<p>Europe is a continent: <span th:text="${#arrays.contains(continents, 'Europe')}"></span>.</p>

<p>Array of continents is empty <span th:text="${#arrays.isEmpty(continents)}"></span>.</p>

Trước tiên, chúng tôi truy vấn độ dài của mảng, sau đó kiểm tra xem Châu Âu có phải là một phần tử của mảng các lục địa hay không.

5. Kết luận

Trong bài viết này, chúng ta đã học cách làm việc với một mảng trong T hymeleaf bằng cách kiểm tra độ dài của nó và truy cập các phần tử của nó bằng cách sử dụng một chỉ mục. Chúng tôi cũng đã học cách lặp lại các phần tử của nó trong Thymeleaf.
Cuối cùng, chúng ta đã thấy việc sử dụng các hàm tiện ích để kiểm tra các thuộc tính khác của một mảng.
Và, như mọi khi, mã nguồn hoàn chỉnh của bài viết này có thể được tìm thấy trên Github .