Vinculando uma lista no Thymeleaf

1. Visão geral

Neste tutorial rápido, vamos mostrarhow to bind a List object in Thymeleaf.

Para aprender como integrar o Thymeleaf com Spring, você pode verificarour main Spring article here - onde você também pode aprender como exibir campos, aceitar entrada, exibir erros de validação ou converter dados para exibição.

2. Listas no exemplo de folha do timo

Começaremos mostrandohow to display elements of a List in a Thymeleaf page and how to bind a list of objects as user’s inputs in a Thymeleaf form.

Para isso, usaremos um modelo simples mostrado no seguinte código:

public class Book {
    private long id;

    private String title;

    private String author;

    // getters and setters
}

Além de exibir os livros existentes em nosso exemplo, permitiremos ao usuário adicionar vários livros à coleção e também editar todos os livros existentes de uma vez.

3. Exibindo Elementos de Lista

Vamos dar uma olhada no seguinte métodoController que retorna a páginaallBooks:

@GetMapping("/all")
public String showAll(Model model) {
    model.addAttribute("books", bookService.findAll());
    return "books/allBooks";
}

Aqui, adicionamosList de objetosBook como um atributo de modelo enviado para a visualização, onde o exibiremos usando uma tabela HTML:


    
        
             Title 
             Author 
        
    
    
    
             No Books Available 
        
        
             Title 
             Author

Title	Author
No Books Available
Title	Author

Aqui,we’re using the th:each property to iterate through the liste exibe as propriedades de cada objeto nele.

4. Vinculando uma lista usando a expressão de seleção

Para enviar a lista de objetos da visão para o controlador via envio de formulário, não podemos usar o próprio objetoList.

Em vez disso,we have to add a wrapper object that will hold the submitted list:

public class BooksCreationDto {
    private List books;

    // default and parameterized constructor

    public void addBook(Book book) {
        this.books.add(book);
    }

    // getter and setter
}

Agora vamos permitir que o usuário adicione três livros em um envio de formulário.

Primeiro, vamos preparar a página do formulário, passando nosso objeto de comando como um atributoModel:

@GetMapping("/create")
public String showCreateForm(Model model) {
    BooksCreationDto booksForm = new BooksCreationDto();

    for (int i = 1; i <= 3; i++) {
        booksForm.addBook(new Book());
    }

    model.addAttribute("form", booksForm);
    return "books/createBooksForm";
}

Como podemos ver, passamos uma lista de 3 objetosBook vazios para a visualização por meio da classe wrapper.

Em seguida, precisamos adicionar o formulário a uma página do Thymeleaf:

E é assim que a página acima será exibida:

Vamos dar uma olhada mais de perto no que fizemos aqui. Primeiro,we used the th:object=”${form}” to specify the command object (aquele que passamos como um atributoModel).

A próxima coisa que vale a pena notar é que acessamos a lista com uma expressão de seleção usando:

E finalmente,we’re mapping our inputs as properties of the list elements using th:field.

No entanto, também precisamos usar a variávelitemStat para definir a qual elemento da lista estamos nos referindo, conforme demonstrado em:

th:field="*{books[__${itemStat.index}__].title}"

A última etapa é realmente manipular os dados enviados no back-end. Usaremos o objeto de comando como@ModelAttribute em nosso método@PostMapping no controlador, salvaremos a lista de livros recuperada e retornaremos todos os livros existentes ao usuário:

@PostMapping("/save")
public String saveBooks(@ModelAttribute BooksCreationDto form, Model model) {
    bookService.saveAll(form.getBooks());

    model.addAttribute("books", bookService.findAll());
    return "redirect:/books/all";
}

Depois de enviar o formulário para o endpoint/save, obteremos a página com todos os livros recém-adicionados:

5. Vinculando uma lista usando expressão variável

Para este exemplo, primeiro carregaremos todos os livros existentes no objeto de comando:

@GetMapping("/edit")
public String showEditForm(Model model) {
    List books = new ArrayList<>();
    bookService.findAll().iterator().forEachRemaining(books::add);

    model.addAttribute("form", new BooksCreationDto(books));
    return "books/editBooksForm";
}

A página HTML é semelhante, com as diferenças mais notáveis no blocoth:each:

Conforme mostrado em<tr th:each=”book, itemStat : $\{form.books}”>, acessamos a lista de uma maneira ligeiramente diferente, usando a expressão de variável desta vez. Especialmente relevante é paranotice that we provided name and value for input elements to properly submit data.

Também tivemos que adicionar uma entrada oculta que vinculará o ID do livro atual, porque não queremos criar novos livros, mas editar os existentes.

6. Conclusão

Neste artigo, ilustramos como usar o objetoList no Thymeleaf e Spring MVC. Mostramos como exibir a lista de objetos enviados para a visualização, mas colocamos o foco principal em duas maneiras de vincular as entradas do usuário como uma lista no formato Thymeleaf.

Todos os trechos de código, mencionados no artigo, podem ser encontrados emour GitHub repository.

TOC

Vinculando uma lista no Thymeleaf