i18nextの使い方は？翻訳の問題

jQuery MobileとjQueryのWebサイドで国際化オプションを使用したいと思います。私はhttp://i18next.comのドキュメントで例を生成しようとしましたが、失敗したようです。誰かがi18nextでの経験を持っていますか？i18nextの使い方は？翻訳の問題

ここに私の例：

のindex.html：

<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
    <script src="jquery-mobile/jquery-1.6.4.min.js"  type="text/javascript"></script> 
    <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script> 
    <script src="js/i18next-1.5.6.min.js"     type="text/javascript"></script> 
    <script src="js/translation.js"      type="text/javascript"></script> 
    </head> 
    <body> 
    <div data-role="page" id="page"> 
    <div data-role="content"> 
     <div id="headline1" data-i18n="headline"></div> 
     <table width="100%" border="0" id="menu1" class="menu"> 
      <tr id="surname"> 
      <td width="50%" data-i18n="menu.surname"></td> 
      <td width="50%">&nbsp;</td> 
      </tr> 
      <tr id="firstName"> 
      <td width="50%" data-i18n="menu.firstName"></td> 
      <td width="50%">&nbsp;</td> 
      </tr> 
     </table> 
     </div> 
    </div> 
    </body> 
</html>

翻訳ファイル： /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

01私が取得メニューの

{ 
    "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(); 
});

翻訳ではなく、期待の "menu.name" で "名前："。見出しのために私は翻訳を得ませんでしたが、私は "Data："または "Daten："を期待しました。

次の直接呼び出しを試しても、私は翻訳がありません： i18n.t（ "menu.surname"、{defaultValue： "Name："}））;

問題が何であるかは誰か知りませんか？それとも誰かが私がしようとしているものに合った実例を持っていますか？

出典

2012-10-22 Thomas

主な問題は、サーバからのリソースのロードが非同期であるため、初期化後に直接i18n.t("menu.surname", { defaultValue: "Name:"});と呼ぶことはできません。したがって、基本的にi18nextがリソースをフェッチする前に変換しようとします。

$(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(); 
    }); 
});

やリソースのシンクロンをロードするためのフラグを使用します。

代わりにコールバックでそれをロードします。

ところで：あなたのHTMLコードは、1つの閉じる</div>が多すぎます。

$("headline").i18n();への呼び出しは$("#headline").i18n();である必要があります。

出典

2012-10-22 07:43:09 jamuhl

これで問題が解決した場合は、これを回答済みにすることができます。だから問題は終わる。 – jamuhl

もう1つ質問：突然変異した母音（ウムラウト）を持つ翻訳テキストを持っている場合、私はちょうど " "を取得します。 HTML表記を使用すると（例： "ä"）、私はHTML表記を参照し、母音は変更されません。私が間違っていることは何ですか？助けてくれてありがとう。 – Thomas

ページでのエンコードとjsonでのエンコードはutf8です。 – jamuhl

<!DOCTYPE html> 
    <html> 

    <head> 
     <title>Basic Sample Usage</title> 

     <script src="js/jquery.js" type="text/javascript"></script> 
     <script src="js/i18next.js" type="text/javascript"></script> 
    </head> 

    <body> 

     <h3> you can switch lng via ?setLng='lngTag' </h3> 
     <a id="en" href="?setLng=en"> en </a> 
      | &nbsp; 
     <a id="de" href="?setLng=de"> de </a> 

     <h3>loaded via attribute 'data-i18n' and $('.nav').i18n();</h3> 

     <h5>basic text</h5> 
     <ul class="nav"> 
      <li class="active"><a href="#" id = "navy" data-i18n="nav.home"></a></li> 
      <li><a href="#" data-i18n="nav.1"></a></li> 
      <li><a href="#" data-i18n="nav.2"></a></li> 
     </ul> 

     <button id="btn" data-i18n="ns.common:add"></button> 

     <h5>extended usage of 'data-i18n' - apply to other attributes</h5> 
     <div id="extendedAttr"> 
      <input data-i18n="[placeholder]ns.common:attr.placeholder;" type="text"></input> 
      <button data-i18n="[title]ns.common:attr.title;btn.hoverMe;"></button> 
     </div> 

     <script> 

     $.i18n.init({ 
      //lng: 'en', 
      ns: { namespaces: ['ns.common', 'ns.special'], defaultNs: 'ns.special'}, 
      useLocalStorage: false, 
      debug: true 
     }, function(t) { 

      //$('#navy').i18n(); for single 
      $('.nav').i18n(); // for group 
      $('#btn').i18n(); 
      $('#extendedAttr').i18n(); 
     }); 



     </script> 

    </body> 

    </html> 


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

出典

2015-08-14 06:59:45 gnganpath

詳細：https://github.com/i18next/i18next – gnganpath

backbone.js実装のi18nについては、下記のリンクをrequire.js https://github.com/manishcm/i18n-backboneで参照してください。 – gnganpath

i18nextの使い方は？翻訳の問題

答えて

関連する問題