Comment utiliser i18next? Des problèmes avec les traductions
je veux utiliser une option d'internationalisation à mon jQuery Mobile et jQuery webside. J'ai essayé de générer un exemple avec la documentation sur http://i18next.com mais il semble que j'ai échoué. Quelqu'un a-t-il une expérience avec i18next?
Voici mon exemple:
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>
Traduction fichier: /locales/de/la traduction.json
{
"menu": {
"surname": "Name:",
"firstName": "Vorname:"
},
"headline": "Daten:",
"headline_1": "Daten Allgemein:",
"headline_2": "Daten Speziell:"
}
/locales/fr/traduction.json
/locales/dev/traduction.json
{
"menu": {
"surname": "Name:",
"firstName": "First Name:"
},
"headline": "Data:",
"headline_1": "Daten Common:",
"headline_2": "Daten Specific:"
}
/js/traduction.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 traduction du menu que j'obtiens est " menu.nom " au lieu de "nom:". Pour le titre Je ne reçois pas de traduction mais je m'attendais à "données:" ou "Daten:".
si j'essaie l'appel direct suivant, je n'obtiens pas de traduction: i18n.t ("menu.nom de famille", { defaultValue: "Nom:"});
quelqu'un sait quel est le problème? Ou quelqu'un a un exemple de travail qui correspond à ce que j'essaie de faire?
2 réponses
le problème principal est que vous ne pouvez pas appeler i18n.t("menu.surname", { defaultValue: "Name:"});
directement après l'initialisation, Car Charger les ressources à partir du serveur est async, donc fondamentalement vous essayez de traduire avant que i18next ne récupère les ressources.
au lieu de charger avec callback:
$(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();
});
});
ou utilisez flag pour charger les ressources synchron.
Par le chemin:
Votre code html a une fermeture </div>
trop nombreux.
L'appel à $("headline").i18n();
doit être $("#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"
}