如何使用i18next？翻译问题 [英] How to use i18next? Problems with translations
问题描述
我想在我的jQuery Mobile和jQuery网站上使用国际化选项。我试图用 http://i18next.com 上的文档生成示例，但似乎我失败了。有没有人有i18next的经验？
这里我的例子：
$ b $ p index.html：
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = ISO-8859-1>
< script src =jquery-mobile / jquery-1.6.4.min.jstype =text / javascript>< / script>
< script src =jquery-mobile / jquery.mobile-1.0.min.jstype =text / javascript>< / script>
< script src =js / i18next-1.5.6.min.jstype =text / javascript>< / script>
< script src =js / translation.jstype =text / javascript>< / script>
< / head>
< body>
< div data-role =pageid =page>
< div data-role =content>
< div id =headline1data-i18n =headline>< / div>
< table width =100％border =0id =menu1class =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
$ b
{
menu：{
surname：Name：，
firstName： Vorname：
，
headline：Daten：，
headline_1：Daten Allgemein：，
headline_2：Daten Speziell：
/locales/dev/translation.json
{
菜单 ：{
surname：姓名：，
firstName：名字：
，
标题：数据： ，
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 ，语言）;
i18n.init（{lng：language}）;
i18n.init（{ debug：true}）;
$（。menu）。i18n（）;
$（headline）。i18n（）;
}）;
我得到的菜单翻译是menu.name，而不是预期的Name：。
对于标题，我没有翻译，但我期望Data：或Daten：。
如果我尝试以下直接调用， ：
i18n.t（menu.surname，{defaultValue：Name：}）;
有人知道问题出在哪里吗？还是有人有一个适合我所做的工作示例？
主要问题是您无法调用 i18n.t（menu.surname，{defaultValue：Name：}）; 在初始化后直接进行，因为从服务器加载资源是异步的，所以基本上你会尝试翻译在$ 18
$ b
$（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因为资源被获取
$（。menu）。i18n（）;
$（headline）。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%"> </td>
</tr>
<tr id="firstName">
<td width="50%" data-i18n="menu.firstName"></td>
<td width="50%"> </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屋！
