如何使用i18next？翻译问题

Question

如何使用i18next？翻译问题

Tho*_*mas 21 html javascript internationalization jquery-mobile i18next

我想在我的jQuery Mobile和jQuery webside上使用国际化选项.我尝试使用http://i18next.com上的文档生成一个示例,但似乎我失败了.有没有人有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>

Run Code Online (Sandbox Code Playgroud)

翻译文件:/locales/de/translation.json

{
  "menu": {
    "surname": "Name:",
    "firstName": "Vorname:"
  },

  "headline": "Daten:",
  "headline_1": "Daten Allgemein:",
  "headline_2": "Daten Speziell:"
}

Run Code Online (Sandbox Code Playgroud)

/locales/en/translation.json

/locales/dev/translation.json

{
  "menu": {
    "surname": "Name:",
    "firstName": "First Name:"
  },

  "headline": "Data:",
  "headline_1": "Daten Common:",
  "headline_2": "Daten Specific:"
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

我得到的菜单的翻译是"menu.name"而不是预期的"名称:".对于标题,我没有翻译,但我期望"数据:"或"日期:".

如果我尝试以下直接调用我没有翻译:i18n.t("menu.surname",{defaultValue:"Name:"});

有谁知道问题是什么？或者有没有一个适合我尝试做的工作示例？

Answer 1

jam*_*uhl 26

主要问题是你无法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();
  });
});

Run Code Online (Sandbox Code Playgroud)

或使用flag来加载资源synchron.

顺便说一下:你的html代码有一个关闭</div>太多了.

呼吁$("headline").i18n();应该是$("#headline").i18n();.

归档时间：	13 年，1 月前
查看次数：	29022 次
最近记录：	9 年，11 月前