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ą na http://i18next.com, ale wygląda na to, że się nie udało. Czy ktokolwiek ma doświadczenia z i18next?Jak korzystać z i18next? Problemy z tłumaczeniami

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łumaczeniowe: /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 menu mogę to "menu.name" zamiast oczekiwać "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.supcja", {defaultValue: "Nazwa:"});

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

Źródło

2012-10-22 Thomas

Główny problem polega na tym, że nie można zadzwonić pod numer 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 ładować go 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żyć flagi załadować zasobów synchron.

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

Połączenie z numerem $("headline").i18n(); powinno być $("#headline").i18n();.

Źródło

2012-10-22 07:43:09 jamuhl

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. "ä"), widzę notację HTML, a nie zmutowaną samogłoskę. Co robię źle? Dziękuję za pomoc. – Thomas

zapewnia kodowanie na stronie iw jsonie jest 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" 
}

Źródło

2015-08-14 06:59:45 gnganpath

Szczegóły: https://github.com/i18next/i18next – gnganpath

Dla i18n z implementacją backbone.js odszukaj poniższy link z require.js https://github.com/manishcm/i18n-backbone – gnganpath

Jak korzystać z i18next? Problemy z tłumaczeniami

Odpowiedz

Powiązane problemy