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です：

<select>オプションがクリックされたときに言語を設定し、ちょうど <p data-i18n="welcome.p1"></p>の値を引くための正しい方法は何ですか

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

/locals/br/translations.jsonファイルを非同期的にページ全体をリロードする必要はありませんか？

これは、ユーザーが他のページに移動すると、どのように保持されますか？ 私はhttps://github.com/allmarkedup/jQuery-URL-Parserを使用していますが、選択肢がhttp://domain.tld/br/のように付加されるように、URIを変更する機能はありません。

Answer 1

翻訳機能を別の機能（つまり、translatePage()）に入れて、initの最初の呼び出しと、clickイベントハンドラの起動の2回目の呼び出しを行います。

また、i18nextにはクッキーストレージが付属しています（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();