如何使用 i18next?翻译问题 [英] How to use i18next? Problems with translations

查看：13
本文介绍了如何使用 i18next?翻译问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在我的 jQuery Mobile 和 jQuery 网页端使用国际化选项.我试图用 http://i18next.com 上的文档生成一个示例，但似乎我失败了.有人有使用 i18next 的经验吗?

这是我的例子:

index.html:

<头><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><身体><div data-role="page" id="page"><div data-role="内容"><div id="headline1" data-i18n="headline"></div><table width="100%" border="0" id="menu1" class="menu"><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>

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

<代码>{菜单": {"姓氏": "姓名:","firstName": "Vorname:"},"headline": "日期:","headline_1": "Daten Allgemein:","headline_2": "Daten Speziell:"}

/locales/en/translation.json

/locales/dev/translation.json

<代码>{菜单": {"姓氏": "姓名:","firstName": "名字:"},"headline": "数据:","headline_1": "Daten Common:","headline_2": "具体日期:"}

/js/translation.js

$(document).ready(function(){language_complete = navigator.language.split("-");语言 = (language_complete[0]);console.log("Sprache (root): %s", language);i18n.init({ lng: 语言});i18n.init({ debug: true });$(".menu").i18n();$("标题").i18n();});

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

如果我尝试以下直接调用，则不会得到任何翻译:i18n.t("menu.surname", { defaultValue: "Name:"});

有人知道是什么问题吗?或者有人有适合我尝试做的工作的例子吗?

解决方案

主要问题是你不能调用 i18n.t("menu.surname", { defaultValue: "Name:"}); 直接在初始化之后，因为从服务器加载资源是异步的，所以基本上你尝试在 i18next 获取资源之前翻译.

而是使用回调加载它:

$(document).ready(function(){language_complete = navigator.language.split("-");语言 = (language_complete[0]);console.log("Sprache (root): %s", language);i18n.init({ lng: language, debug: true }, function() {//保存以在获取资源时使用翻译功能$(".menu").i18n();$("标题").i18n();});});

或者使用标志来同步加载资源.

顺便说一句:您的 html 代码有一个结束 </div> 太多.

对$("headline").i18n();的调用应该是$("#headline").i18n();.

I want to use a internationalization option at my jQuery Mobile and jQuery webside. I tried to generate an example with the documentation on http://i18next.com but it seems I failed. Does anybody has experiences with i18next?

Here my example:

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>

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

The translation for the menu I get is "menu.name" instead of expected "Name:". For the headline I get no translation but I expected "Data:" or "Daten:".

If i try the following direct call I get no translation: i18n.t("menu.surname", { defaultValue: "Name:"});

Does anybody know what the problem is? Or does anybody has a working example that fits what I try to do?

解决方案

Main problem is you can't call i18n.t("menu.surname", { defaultValue: "Name:"}); directly after initialization, as loading the resources from server is async, so basically you try to translate before i18next fetched the resources.

Instead load it with callback:

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

or use flag to load resources synchron.

By the way: Your html code has one closing </div> too many.

The call to $("headline").i18n(); should be $("#headline").i18n();.

这篇关于如何使用 i18next?翻译问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆