Pytanie Jak korzystać z i18next? Problemy z tłumaczeniami


Chcę użyć opcji internacjonalizacji na mojej stronie jQuery Mobile i stronie jQuery. Próbowałem wygenerować przykład z dokumentacją http://i18next.com ale wygląda na to, że mi się nie udało. Czy ktokolwiek ma doświadczenia z i18next?

Oto mój przykład:

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>

Pliki tłumaczeń: /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();
});

Tłumaczenie dla otrzymanego menu to "menu.name" zamiast oczekiwanego "Name:". W nagłówku nie mam tłumaczenia, ale oczekiwałem "Data:" lub "Daten:".

Jeśli spróbuję następującego połączenia bezpośredniego, nie otrzymam tłumaczenia:     i18n.t ("menu.surname", {defaultValue: "Name:"});

Czy ktoś wie, co to jest problem? A może ktoś ma działający przykład, który pasuje do tego, co próbuję zrobić?


21
2017-10-22 06:08


pochodzenie




Odpowiedzi:


Głównym problemem jest to, że nie możesz zadzwonić i18n.t("menu.surname", { defaultValue: "Name:"}); bezpośrednio po inicjalizacji, ponieważ ładowanie zasobów z serwera jest asynchroniczne, więc w zasadzie próbujesz przetłumaczyć, zanim i18next pobierze zasoby.

Zamiast tego załaduj go za pomocą wywołania zwrotnego:

$(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();
  });
});

lub użyj flagi, aby załadować zasoby synchron.

Tak poza tym: Twój kod html ma jedno zamknięcie </div> za dużo.

Wezwanie do $("headline").i18n(); powinno być $("#headline").i18n();.


26
2017-10-22 07:43



Jeśli to rozwiązało problem, możesz oznaczyć to jako odpowiedź. Pytanie się zamyka. - jamuhl
Jeszcze jedno pytanie: jeśli mam tekst tłumaczenia ze zmutowaną samogłoską (umlaut), to dostaję tylko " ". Jeśli używam notacji HTML (np. "& Auml;"), widzę notację HTML, a nie zmutowaną samogłoskę. Co robię źle? Dziękuję za pomoc. - Thomas
zapewnij kodowanie na stronie, a w jsonie utf8. <meta http-equiv = "content-type" content = "text / html; charset = utf-8"> - jamuhl
To bardziej ustawienie serwera: możesz rzucić okiem tutaj stackoverflow.com/questions/11363394/... (po prostu ściągnij json do klienta w utf-8 - nie wiesz jak skonfigurować serwer) - jamuhl
to nie narzędzie. jeśli podajesz pliki z systemu plików, możesz przechowywać pliki json w formacie iso zamiast utf8. - 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"
}

1
2017-08-14 06:59



Dla szczegółów : github.com/i18next/i18next - gnganpath
Dla i18n z implementacją backbone.js odszukaj poniższy link z require.js github.com/manishcm/i18n-backbone - gnganpath