4

Estou tentando utilizar este plugin jQuery para internacionalizar minha web app.

Especificamente, estou querendo utilizar a API data nos campos que devem ser traduzidos mas o alert retorna "um" e não "ONE" e as tags spans continuam com Um e Dois.

Página

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>jQuery i18n Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
<script src="../src/jquery.i18n.js"></script>
<script src="../src/jquery.i18n.messagestore.js"></script>

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>

<script>
    $.i18n({
        locale: 'en'
    });

    alert($.i18n("um"));
</script>
</head>

<body>
<span data-i18n="um">Um</span>.
<span data-i18n="dois">Dois</span>.
</body>
</html>

en.json

{
"um": "ONE",
"dois": "TWO"
}

Alguém já utilizou ele e pode ajudar?

0

1 Resposta 1

5
+50

Para fazer com que o código execute e realize a internacionalização é necessário invocar a função $.i18n() nos elementos desejados. Para utilizar de forma genérica (em todos os elementos com o atributo data-i18n), utilize o seletor [data-i18n].

O código pode ser executado da seguinte forma: $('[data-i18n]').i18n().

Exemplo

Segue abaixo um exemplo demonstrando o uso do plugin

$.i18n().load({
  br: {
    'welcome': 'ola mundo'
  },
  en: {
    'welcome': 'hello world'
  },
  es: {
    'welcome': 'hola mundo'
  }
});

function changeLocale(locale) {

  $.i18n({
    locale: locale
  });

  $('[data-i18n]').i18n();

}

$(function() {

  $('button').on('click', function() {

    var locale = $(this).data('locale');

    changeLocale(locale);

  });

});

changeLocale('en'); // locale default da página
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.js"></script>
<script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.messagestore.js"></script>


<button type="button" data-locale="br">br</button>
<button type="button" data-locale="en">en</button>
<button type="button" data-locale="es">es</button>

<h1 data-i18n="welcome">ola mundo (fallback)</h1>

5
  • O mesmo da para fazer utilizando as properties em Java, você coloca label.teste=Teste e utilizando o Spring você chama a chave label.teste para aparecer o texto, portanto, qual a vantagem e desvantagem de utilizar tanto um quanto o outro? Pode-se utilizar os dois na mesma aplicação? Seria uma boa prática? Commented 9/10/2015 às 11:40
  • 1
    @GiancarloGiulian praticamente todo framework MVC (Struts, JSF, Spring MVC) trabalha com i18n. A diferença principal é que utilizando a i18n desse modo, o back-end vai enviar o HTML já com o resultado da internacionalização. Caso o usuário deseje alterar o idioma, o framework vai realizar uma nova requisição para recuperar o HTML novamente. Utilizando o plugin do jquery a responsabilidade da internacionalização é da camada front-end. As alterações podem ou não realizar uma nova requisição, dependendo da implementação. Para a grande maioria dos casos, apenas uma das soluções já vai atender bem.
    – Romulo
    Commented 9/10/2015 às 14:31
  • Obrigado @Romulo, se conseguir listar mais vantagens e desvantagens de utilizar um ou outro agradeceria novamente. Commented 9/10/2015 às 19:21
  • Como a opção de idioma fica armazenada em banco e posteriormente em session (após login), o que acha de eu criar um .js para cada idioma (en.js e pt.js) já com o código de inicialização (seu método changeLocale) e adicioná-los na página de acordo com a session dele?
    – Onaiggac
    Commented 13/10/2015 às 15:08
  • @Onaiggac parece uma opção completamente funcional
    – Romulo
    Commented 13/10/2015 às 15:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .