Trabalhando com o Mustache

O Mustache é um template engine que pode ser usado no lugar do Thymeleaf. Ele tem uma sintaxe mais simplificada.

Configurando a aplicação

A primeira coisa é adicionar a dependência do mustache dentro de seu projeto Spring Boot. Para isso basta adicionar ao seu pom:

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

A seguir você vai precisar configurar a sua aplicação para entender os arquivos HTML como templates mustache (caso não configure o Spring Boot vai procurar por arquivos com a extensão .mustache).

spring.mustache.prefix = classpath:/templates/
spring.mustache.suffix:.html

Neste ponto a sua aplicação está pronta para utilizar os templates Mustache.

Configurando o VSCode

Para facilitar na programação, podemos instalar uma extensão que vai fazer o realce de sintaxe para os arquivos de template mustache. Existem várias extensões que se propõem a isso, das três principais, a que teve o melhor resultado foi a Mustache Syntax.

Após instalar você vai notar que mesmo que tenha código mustache dentro de seu arquivo HTML o realce de sintaxe não está funcionando. Isso porque escolhemos manter os arquivos com a extensão .html. Logo, precisamos dizer ao VSCode isso. Para isso crie um arquivo .vscode/settings.json na raiz do seu projeto. Nele coloque a seguinte configuração:

"files.associations": {
    "*.html": "mustache"
},
"emmet.includeLanguages": {
    "mustache": "html"
}

Essa configuração diz para a extensão considerar arquivos HTML como template mustache e não perdermos o autocompletar do arquivo HTML.

Testando o mustache

Para fazer a interpolação de valores, mustache usa a sintaxe {{ }}. Veja o exemplo a seguir. Suponha que você tem uma classe controladora com a rota /olaMustache e está enviando um dado para o arquivo html com a chave msg:

@GetMapping("/olaMustache")
public String olaMustache(Model model) {
    model.addAttribute("msg", "Olá, Mustache!");
    return "olaMustache";
}

Para conseguir renderizar essa mensagem, basta no arquivo olaMustache.html você ter o seguinte código:

<h1>{{msg}}</h1>

Iterando com o mustache

Caso você tenha uma lista de objetos, também é fácil passar as informações. Veja o exemplo, nele temos uma lista simples (de Strings) e enviamos esse dado para o mustache.

@GetMapping("/listaMustache")
public String listaMustache(Model model) {
    List<String> lista = List.of("Item 1", "Item 2", "Item 3");
    model.addAttribute("lista", lista);
    return "listaMustache";
}

No arquivo de template então iteramos com {{#variavelLista}}. A diferença é a utilização do caracter # para listas. Outra diferença é que para cada item da lista utilizamos a sintaxe especial . que representa cada item da lista.

{{#lista}}
    <li>{{.}}</li>
{{/lista}}

No caso da lista ser uma lista de objetos, você vai utilizar o nome dos atributos para acessar as propriedades do objeto. Veja o novo exemplo:

@GetMapping("/listaMustache")
public String listaMustache(Model model) {
    List<Tarefa> lista = List.of(
        new Tarefa("Tarefa 1", true),
        new Tarefa("Tarefa 2", false),
        new Tarefa("Tarefa 3", false)
    );

    model.addAttribute("lista", lista);
    return "listaMustache";
}

{{#lista}}
    <li>{{descricao}} <small>{{concluida}}</small></li>
{{/lista}}