如何使用i18next？翻譯問題

我想在我的jQuery Mobile和jQuery網站上使用國際化選項。我試圖用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

個

{ 
    "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」，而不是預期的「名稱」。對於標題我沒有翻譯，但我期望「數據：」或「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(); 
    }); 
});

或使用標誌來加載資源SYNCHRON。

順便說一句：您的html代碼有一個關閉</div>太多。

撥打$("headline").i18n();應該是$("#headline").i18n();。

來源

2012-10-22 07:43:09 jamuhl

如果這解決了您的問題，您可以將其標記爲已回答。所以問題就解決了。 – jamuhl

還有一個問題：如果我有一個帶有變異元音（變音符號）的翻譯文本，那麼我得到的只是一個「」。如果我使用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

對於i18n with backbone.js的實現，請參考下面的鏈接require.js https://github.com/manishcm/i18n-backbone – gnganpath

如何使用i18next？翻譯問題

回答

相關問題