Come usare i18next? Problemi con le traduzioni

Voglio utilizzare un’opzione di internazionalizzazione sul mio jQuery Mobile e sul sito Web di jQuery. Ho provato a generare un esempio con la documentazione su http://i18next.com ma sembra che abbia fallito. Qualcuno ha esperienze con i18next?

Ecco il mio esempio:

index.html:

         

File di traduzione: /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 traduzione per il menu che ottengo è “menu.name” anziché “Nome” previsto. Per il titolo non ottengo traduzione ma mi aspettavo “Data:” o “Daten:”.

Se provo la seguente chiamata diretta non ottengo alcuna traduzione: i18n.t (“menu.surname”, {defaultValue: “Name:”});

Qualcuno sa qual è il problema? O qualcuno ha un esempio funzionante che si adatta a quello che cerco di fare?

Il problema principale è che non è ansible chiamare i18n.t("menu.surname", { defaultValue: "Name:"}); direttamente dopo l’inizializzazione, poiché il caricamento delle risorse dal server è asincrono, quindi in pratica si tenta di tradurre prima che i18next recuperi le risorse.

Caricalo invece con 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(); }); }); 

o utilizzare flag per caricare le risorse sincronizzate.

A proposito: il tuo codice html ha una chiusura troppe.

La chiamata a $("headline").i18n(); dovrebbe essere $("#headline").i18n(); .

     Basic Sample Usage     

you can switch lng via ?setLng='lngTag'

en |   de

loaded via attribute 'data-i18n' and $('.nav').i18n();

basic text
extended usage of 'data-i18n' - apply to other attributes
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" }