Selettore lingue asincrone con i18next

Question

Sto utilizzando http://jamuhl.github.com/i18next per localizzare un sito Web statico.

mio script di inizializzazione è:

jQuery(function($) { 
    var setLng = $.url().param('setLng'); 
    if (setLng) 
    { 
     language_complete = setLng.split("-"); 
    } 
    else 
    { 
     language_complete = navigator.language.split("-"); 
    } 
    language = (language_complete[0]); 
    console.log("I speak (root): %s", language); 

    i18n.init({ lng: language, debug: true }, function() { 
     // save to use translation function as resources are fetched 
     $(".tzm-i18n").i18n(); 
     $(".page-i18n").i18n(); 
     $(".menu-i18n").i18n(); 
     $(".user-i18n").i18n(); 
     $(".search-i18n").i18n(); 
     $(".footer-i18n").i18n(); 
    }); 
    // language selector 
    var lngSld = false; 
    $('.lng_trigger').click(function() { 

Ed ecco il codice HTML:

<div id="page" class="page-i18n"> 
    <!--${languages} Bread crumbs --> 
     <p data-i18n="welcome.p1"></p> 
     <p data-i18n="welcome.p2"></p> 
    </div> 
    <li id="set-lang"><!-- Language selector --> 
    <select id="source"> 
     <option selected="selected" value="br">Brasil</option> 
     <option value="fr">France</option> 
     <option value="de">Germany</option> 
     <option value="in">India</option> 
     <option value="jp">Japan</option> 
     <option value="rs">Serbia</option> 
     <option value="uk">United Kingdom</option> 
     <option value="us">United States</option> 
    </select> 
    </li> 

Qual è il modo corretto di impostare la lingua quando <select> opzione viene cliccato e basta tirare i valori per <p data-i18n="welcome.p1"></p> dal file /locals/br/translations.json in modo asincrono senza dover ricaricare l'intera pagina?

Come si manterrebbe quindi questa condizione, se l'utente naviga in altre pagine? Sto usando https://github.com/allmarkedup/jQuery-URL-Parser ma non vedo alcuna funzione per modificare l'uri in modo che la scelta sia aggiunta a http://domain.tld/br/.

Answer 1

avrei messo le funzioni di traduzione in una funzione separata (cioè translatePage()) e richiedere la prima volta durante init e una seconda volta quando il gestore click evento viene generato.

Inoltre, i18next viene fornito con la memorizzazione dei cookie (inizializzata con useCookie: true); è possibile utilizzare questo per memorizzare la lingua corrente con $.i18n.setLng e recuperarlo con le funzioni $.i18n.lng(). Quindi è facile reindirizzare a ciascun URI.

Spero che questo aiuti.

Answer 2

Ciò che manudurand ha detto è corretto. Inoltre, non è necessario ricaricare la pagina, basta impostare la lingua e tradurre le stringhe di nuovo in questo modo:

i18n.setLng('en-EN', function() { $('[data-i18n]').i18n(); }); 

Tuttavia, nel tuo caso, invece di ...

$('[data-i18n]').i18n(); 

.. Sarebbe ...

$(".tzm-i18n").i18n(); 
    $(".page-i18n").i18n(); 
    $(".menu-i18n").i18n(); 
    $(".user-i18n").i18n(); 
    $(".search-i18n").i18n(); 
    $(".footer-i18n").i18n();