TOC

Acessando objetos de modelo Spring MVC em JavaScript

Acessando objetos de modelo Spring MVC em JavaScript

1. Visão geral

Neste tutorial, vamos mostrar como acessar objetos Spring MVC em visualizações Thymeleaf que contêm código JavaScript. Usaremos Spring Boot e o mecanismo de modelo Thymeleaf em nossos exemplos, mas a ideia funciona para outros mecanismos de modelo também.

Vamos descrever dois casos: quando o código JavaScript é incorporado ou interno à página da web gerada pelo mecanismo e quando é externo à página - por exemplo, em um arquivo JavaScript separado.

2. Configuração

Vamos supor que já configuramos um aplicativo da web Spring Boot que usa o mecanismo de modelo Thymeleaf. Caso contrário, você poderá encontrar estes tutoriais úteis para iniciar:

Além disso, vamos supor que nosso aplicativo tenha um controlador correspondente a um endpoint/index que renderiza uma visualização de um modelo chamadoindex.html. Este modelo pode incluir um código JavaScript integrado ou externo, digamosscript.js.

Nosso objetivo é acessar os parâmetros do Spring MVC a partir do código JavaScript (JS) incorporado ou externo.

3. Acesse os Parâmetros

Primeiro de tudo, precisamos criar as variáveis ​​de modelo que queremos usar a partir do código JS.

No Spring MVC, existem várias maneiras de fazer isso. Vamos usar a abordagemModelAndView: 

@RequestMapping("/index")
public ModelAndView thymeleafView(Map model) {
    model.put("number", 1234);
    model.put("message", "Hello from Spring MVC");
    return new ModelAndView("thymeleaf/index");
}

Podemos encontrar outras possibilidades em nosso tutorial emModel, ModelMap, and ModelView in Spring MVC.

4. Código JS incorporado

O código JS incorporado nada mais é do que uma parte do arquivoindex.html que está localizado dentro do elemento<script>. Podemos passar variáveis ​​do Spring MVC para lá de maneira bem direta:

O mecanismo de modelo do Thymeleaf substitui cada expressão por um valor que está disponível no escopo da execução atual. Isso significa que o mecanismo do modelo transforma o código mencionado acima no seguinte código HTML:

5. Código JS externo

Digamos que nosso código JS externo esteja incluído no arquivoindex.html usando a mesma tag<script>, na qual especificamos o atributosrc:

Agora, se quisermos usar os parâmetros Spring MVC descript.js, devemos:

  1. definir variáveis ​​JS no código JS incorporado, como fizemos na seção anterior

  2. acessar essas variáveis ​​do arquivoscript.js 

Note that the external JS code should be invoked after the initialization of the variables of the embedded JS code.

Isso pode ser alcançado de duas maneiras: especificando a ordem de uma execução de código JS ou usando uma execução de código JS assíncrona.

5.1. Especifique a ordem de execução

Podemos fazer isso declarando o código JS externo após o incorporado emindex.html:

5.2. Execução de código assíncrona

Nesse caso, a ordem em que declaramos o código JS externo e incorporado emindex.html não tem importância, mas devemos colocar o código descript.js em um wrapper carregado na página típico: 

window.onload = function() {
    // JS code
};

Apesar da simplicidade deste código, a prática mais comum é usarjQuery instead. Incluímos esta biblioteca como o primeiro elemento<script> no arquivoindex.html: 



    
        
        ...
    
 ...

Agora, podemos colocar o código JS dentro do seguinte wrapperjQuery: 

$(function () {
    // JS code
});

Com esse wrapper, podemos garantir que o código JS seja executado apenas quando todo o conteúdo da página e, portanto, todo o outro código JS incorporado, estiver completamente carregado.

6. Um pouco de explicação

No Spring MVC, o mecanismo de modelo Thymeleaf analisa apenas o arquivo de modelo (index.html em nosso caso) e o converte em um arquivo HTML. Este arquivo, por sua vez, pode incluir referências a outros recursos que estão fora do escopo do mecanismo do modelo. É o navegador do usuário que analisa esses recursos e renderiza a visualização HTML.

Portanto, esses recursos não são analisados ​​pelo mecanismo de modelo e podemos injetar variáveis ​​definidas no controlador apenas no código JS incorporado que fica disponível para o código JS externo.

7. Conclusão

Neste tutorial, aprendemos como acessar os parâmetros Spring MVC dentro de um código JavaScript.

Como sempre, os exemplos de código completos sãoin our GitHub repository.

Related