Асинхронный выбор языка с использованием i18next

Question

Я использую http://jamuhl.github.com/i18next для локализации статического сайта.

Мой скрипт инициализации:

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

А вот и 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>

Как правильно установить язык, когда <select> опция нажата и просто потяните значения для <p data-i18n="welcome.p1"></p> от /locals/br/translations.json файл асинхронно без перезагрузки всей страницы?

Как это будет сохраняться, если пользователь перейдет на другие страницы? Я использую https://github.com/allmarkedup/jQuery-URL-Parser но не вижу никаких функций для изменения URI, чтобы выбор был добавлен в лайк http://domain.tld/br/,

Answer 1

Я бы поставил функции перевода в отдельную функцию (т.е. translatePage()) и назовите это впервые init и второй раз, когда click обработчик событий сработал.

Кроме того, i18next поставляется с хранилищем cookie (инициализируется с помощью useCookie: true); Вы можете использовать это, чтобы сохранить ваш текущий язык с $.i18n.setLng и получить его с $.i18n.lng() функции. Тогда легко перенаправить на каждый URI.

Надеюсь, это поможет.

Answer 2

То, что сказал Манудуранд, верно. Кроме того, вам не нужно перезагружать страницу, просто установите язык и снова переведите строки следующим образом:

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

Однако в вашем случае вместо...

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

... это было бы...

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