我已经尝试解决 i18next 按钮翻译问题有一段时间了。如果我从第 1 页移动到第 2 页，然后再移动到第 1 页，按钮渲染会中断: 从第 1 页移动到第 2 页，然后再从第 1 页移动后，是否有办法阻止第 1 页上的按钮损坏
下面是使用的标记:
<!DOCTYPE html>
<html>
<head>
<title>Mbank</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/vendor/i18next/i18next-1.7.1.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div id="home_page" data-role="page">
<div data-role="header"><a href="/" data-icon="home" data-i18n>app.home</a>
<h2 data-i18n>app.title</h2>
</div>
<div data-role="content">
<a href="#home_page2" id="index-conatact" data-role="button" data-i18n data-corners="false" data-icon="grid">app.page2</a>
</div>
<div data-role="footer">
<center>
<p data-i18n>app.footer</p>
</center>
</div>
</div>
<div id="home_page2" data-role="page">
<div data-role="header"><a href="/" data-icon="home" data-i18n>app.home</a>
<h2 data-i18n>app.title</h2>
</div>
<div data-role="content">
<a href="#home_page" id="index-conatactwws" data-role="button" data-i18n data-corners="false" data-icon="grid">app.page1</a>
</div>
<div data-role="footer">
<center>
<p data-i18n>app.footer</p>
</center>
</div>
</div>
<script>
$(document).on("pagebeforecreate", function () {
console.log(' sample pagebeforecreate');
var i18nOpts = {
resStore: {
dev: {
translation: {
app: {
button: 'Button i18',
home: 'Home i18',
label: 'Label i18',
footer: 'Footer i18',
title: 'i18n Translation!',
li: 'Read-only',
lilink: 'Linked item',
col: 'Collapsible',
page1: 'to page 1', page2: 'to page 2',
colContent: 'Lorem ipsum dolor sit amet.'
}
}
}
}
};
i18n.init(i18nOpts).done(function () {
$("html").i18n();
});
});
</script>
</body>
</html>
最佳答案
确保 i18Net init 仅运行一次。 pagebeforecreate 在导航到的每个页面上运行。你可以这样做:
var i18nOpts = {
resStore: {
dev: {
translation: {
app: {
button: 'Button i18',
home: 'Home i18',
label: 'Label i18',
footer: 'Footer i18',
title: 'i18n Translation!',
li: 'Read-only',
lilink: 'Linked item',
col: 'Collapsible',
page1: 'to page 1', page2: 'to page 2',
colContent: 'Lorem ipsum dolor sit amet.'
}
}
}
}
};
var IsInit = false;
$(document).on("pagebeforecreate", function () {
if (!IsInit){
i18n.init(i18nOpts).done(function () {
$("html").i18n();
IsInit = true;
});
}
});
Here is a DEMO
您也可以只在主页的pagecreate上运行它:
$(document).on("pagebeforecreate", "#home_page", function () {
i18n.init(i18nOpts).done(function () {
$("html").i18n();
IsInit = true;
});
});
或者不将其应用于整个 $("html")。
关于javascript - Jquery 移动按钮和 i18next 翻译，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21402826/