Asynchroniczny selektor języka za pomocą i18next

Question

Używam http://jamuhl.github.com/i18next do zlokalizowania statycznej strony internetowej.

Mój skrypt inicjalizacji:

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() { 

A oto 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> 

Jaki jest prawidłowy sposób, aby ustawić język, gdy <select> opcja kliknięciu i po prostu wyciągnąć wartości <p data-i18n="welcome.p1"></p> z asynchronicznego pliku /locals/br/translations.json bez konieczności ponownego ładowania całej strony?

W jaki sposób będzie się to utrzymywać, jeśli użytkownik przejdzie następnie na inne strony? Używam https://github.com/allmarkedup/jQuery-URL-Parser, ale nie widzę żadnych funkcji służących do zmiany nazwy użytkownika, dzięki czemu wybór zostanie dodany pod numer http://domain.tld/br/.

Answer 1

chciałbym umieścić funkcje translacji w osobnej funkcji (tj translatePage()) i nazwać ją po raz pierwszy podczas init i drugi raz kiedy obsługi click zdarzenie jest zwolniony.

Ponadto, i18next posiada pamięć podręczną (zainicjowaną przy użyciu useCookie: true); możesz go użyć do zapisania bieżącego języka za pomocą $.i18n.setLng i pobrać go za pomocą funkcji $.i18n.lng(). Wtedy łatwo jest przekierować do każdego identyfikatora URI.

Mam nadzieję, że to pomoże.

Answer 2

Co powiedział manudurand jest poprawne. Ponadto, nie trzeba odświeżyć stronę, wystarczy ustawić język i przełożyć struny znowu tak:

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

Jednak w twoim przypadku zamiast ...

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

.. To byłoby ...

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