Wie benutze ich i18next? Probleme mit Übersetzungen

Ich möchte eine Internationalisierung Option auf meiner Website jQuery Mobile und jQuery verwenden. Ich habe versucht, ein Beispiel mit der Dokumentation auf http://i18next.com zu generieren, aber es scheint, dass ich gescheitert bin. Hat jemand Erfahrungen mit i18next?Wie benutze ich i18next? Probleme mit Übersetzungen

Hier mein Beispiel:

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>

Übersetzungsdateien: /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(); 
});

Die Übersetzung für das Menü I erhalten statt der erwarteten "menu.name" "Name:". Für die Überschrift bekomme ich keine Übersetzung, aber ich erwartete "Data:" oder "Daten:".

Wenn ich den folgenden direkten Anruf versuche, bekomme ich keine Übersetzung: i18n.t ("menu.surname", {defaultValue: "Name:"});

Weiß jemand, was das Problem ist? Oder hat jemand ein funktionierendes Beispiel, das zu dem passt, was ich versuche?

Quelle

2012-10-22 Thomas

Hauptproblem ist, dass Sie i18n.t("menu.surname", { defaultValue: "Name:"}); nicht direkt nach der Initialisierung aufrufen können, da das Laden der Ressourcen vom Server asynchron ist, also versuchen Sie im Grunde zu übersetzen, bevor i18next die Ressourcen abgerufen hat.

laden Sie es stattdessen mit Rückruf:

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

oder Flag verwenden, um Ressourcen synchron zu laden.

Übrigens: Ihr HTML-Code hat einen Abschluss </div> zu viele.

Der Aufruf an $("headline").i18n(); sollte $("#headline").i18n(); sein.

Quelle

2012-10-22 07:43:09 jamuhl

Wenn dies Ihr Problem gelöst hat, können Sie dies als beantwortet markieren. Die Frage wird also geschlossen. – jamuhl

Noch eine Frage: Wenn ich einen Übersetzungstext mit einem mutierten Vokal (Umlaut) habe, bekomme ich nur ein " ". Wenn ich die HTML-Notation verwende (z. B. "ä"), sehe ich die HTML-Notation und nicht den mutierten Vokal. Was mache ich falsch? Danke für die Hilfe. – Thomas

Assert-Codierung auf Seite und in JSON ist 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" 
}

Quelle

2015-08-14 06:59:45 gnganpath

Für Details: https://github.com/i18next/i18next – gnganpath

Für i18n mit backbone.js Implementierung verweisen Sie den folgenden Link mit require.js https://github.com/manishcm/i18n-backbone – gnganpath

Wie benutze ich i18next? Probleme mit Übersetzungen

Antwort

Verwandte Themen