web-dev-qa-db-fra.com

Comment utiliser i18next? Problèmes avec les traductions

Je souhaite utiliser une option d'internationalisation sur mon site Web jQuery Mobile et jQuery. 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 des expériences 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%">&nbsp;</td>
          </tr>
          <tr id="firstName">
            <td width="50%" data-i18n="menu.firstName"></td>
            <td width="50%">&nbsp;</td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

Fichiers de traduction: /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 traduction du menu que j'obtiens est "menu.name" au lieu de "Name:" attendu. Pour le titre, je n'ai pas de traduction mais je m'attendais à "Data:" ou "Daten:".

Si j'essaie l'appel direct suivant, je ne reçois aucune traduction: i18n.t ("menu.surname", {defaultValue: "Name:"});

Quelqu'un sait-il quel est le problème? Ou est-ce que quelqu'un a un exemple de travail qui correspond à ce que j'essaie de faire?

javascripthtmljquery-mobileinternationalizationi18next
21
Thomas

Le problème principal est que vous ne pouvez pas appeler i18n.t("menu.surname", { defaultValue: "Name:"}); directement après l'initialisation, car le chargement des ressources depuis le serveur est asynchrone, donc vous essayez essentiellement de traduire avant que i18next ne récupère les ressources.

Au lieu de cela, chargez-le avec rappel:

$(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 l'indicateur pour charger la synchronisation des ressources.

Soit dit en passant: votre code html en a un de fermeture </div> De trop.

L'appel à $("headline").i18n(); doit être $("#headline").i18n();.

26
jamuhl
    <!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>
            | &nbsp;
        <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"
}
2
gnganpath