javascript - traducir - ¿Cómo usar i18siguiente? Problemas con las traducciones.
traducir pagina web automaticamente (2)
Quiero utilizar una opción de internacionalización en mi sitio web jQuery Mobile y jQuery. Intenté generar un ejemplo con la documentación en http://i18next.com pero parece que fallé. ¿Alguien tiene experiencias con i18siguiente?
Aquí mi ejemplo:
index.html:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="js/i18next-1.5.6.min.js" type="text/javascript"></script>
<script src="js/translation.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content">
<div id="headline1" data-i18n="headline"></div>
<table width="100%" border="0" id="menu1" class="menu">
<tr id="surname">
<td width="50%" data-i18n="menu.surname"></td>
<td width="50%"> </td>
</tr>
<tr id="firstName">
<td width="50%" data-i18n="menu.firstName"></td>
<td width="50%"> </td>
</tr>
</table>
</div>
</div>
</body>
</html>
Archivos de traducción: /locales/de/translation.json
{
"menu": {
"surname": "Name:",
"firstName": "Vorname:"
},
"headline": "Daten:",
"headline_1": "Daten Allgemein:",
"headline_2": "Daten Speziell:"
}
/locales/en/translation.json
/locales/dev/translation.json
{
"menu": {
"surname": "Name:",
"firstName": "First Name:"
},
"headline": "Data:",
"headline_1": "Daten Common:",
"headline_2": "Daten Specific:"
}
/js/translation.js
$(document).ready(function(){
language_complete = navigator.language.split("-");
language = (language_complete[0]);
console.log("Sprache (root): %s", language);
i18n.init({ lng: language });
i18n.init({ debug: true });
$(".menu").i18n();
$("headline").i18n();
});
La traducción para el menú que obtengo es "menu.name" en lugar de "Name:" esperado. Para el titular no recibo ninguna traducción, pero esperaba "Data:" o "Daten:".
Si trato la siguiente llamada directa, no obtengo ninguna traducción: i18n.t ("menu.surname", {defaultValue: "Name:"});
¿Alguien sabe cuál es el problema? ¿O alguien tiene un ejemplo práctico que se ajuste a lo que trato de hacer?
El principal problema es que no puede llamar a i18n.t("menu.surname", { defaultValue: "Name:"}); directamente después de la inicialización, ya que cargar los recursos desde el servidor es asíncrono, así que básicamente intenta traducir antes de que i18siguiente obtenga los recursos.
En su lugar, cargarlo con devolución de llamada:
$(document).ready(function(){
language_complete = navigator.language.split("-");
language = (language_complete[0]);
console.log("Sprache (root): %s", language);
i18n.init({ lng: language, debug: true }, function() {
// save to use translation function as resources are fetched
$(".menu").i18n();
$("headline").i18n();
});
});
o use la bandera para cargar los recursos sincrónicos.
Por cierto: su código html tiene un cierre </div> demasiados.
La llamada a $("headline").i18n(); debería ser $("#headline").i18n(); .
<!DOCTYPE html>
<html>
<head>
<title>Basic Sample Usage</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/i18next.js" type="text/javascript"></script>
</head>
<body>
<h3> you can switch lng via ?setLng=''lngTag'' </h3>
<a id="en" href="?setLng=en"> en </a>
|
<a id="de" href="?setLng=de"> de </a>
<h3>loaded via attribute ''data-i18n'' and $(''.nav'').i18n();</h3>
<h5>basic text</h5>
<ul class="nav">
<li class="active"><a href="#" id = "navy" data-i18n="nav.home"></a></li>
<li><a href="#" data-i18n="nav.1"></a></li>
<li><a href="#" data-i18n="nav.2"></a></li>
</ul>
<button id="btn" data-i18n="ns.common:add"></button>
<h5>extended usage of ''data-i18n'' - apply to other attributes</h5>
<div id="extendedAttr">
<input data-i18n="[placeholder]ns.common:attr.placeholder;" type="text"></input>
<button data-i18n="[title]ns.common:attr.title;btn.hoverMe;"></button>
</div>
<script>
$.i18n.init({
//lng: ''en'',
ns: { namespaces: [''ns.common'', ''ns.special''], defaultNs: ''ns.special''},
useLocalStorage: false,
debug: true
}, function(t) {
//$(''#navy'').i18n(); for single
$(''.nav'').i18n(); // for group
$(''#btn'').i18n();
$(''#extendedAttr'').i18n();
});
</script>
</body>
</html>
locales/en/ns.special.json <=> make same for de/ns.speacial.json
{
"nav": {
"home": "en home",
"1": "en link 1",
"2": " en link 2"
},
"btn": {
"hoverMe": "en hover me!"
}
}
and locales/de/ns.common.json <=> make same for en/ns.speacial.json
{
"app": {
"company": {
"name": "my company"
}
},
"attr": {
"placeholder": "de translated placeholder",
"title": "translated title"
},
"add": "de add"
}