我正在调查i18next本地化库的可能性。
现在我有以下代码(full Fiddle is here):
HTML
<div data-i18n="title"></div>
<input placeholder="Hello" value="name">
<div class="holder"></div>
<button class="lang" data-lang="en">Eng</button>
<button class="lang" data-lang="ch">Chi</button>
JS
$(document).ready(function () {
i18n.init({
"lng": 'en',
"resStore": resources,
"fallbackLng" : 'en'
}, function (t) {
$(document).i18n();
});
$('.lang').click(function () {
var lang = $(this).attr('data-lang');
i18n.init({
lng: lang
}, function (t) {
$(document).i18n();
});
});
});
它会翻译所有text
元素,但问题是我无法翻译custom attributes
。例如,div中的文本已翻译,但我无法理解如何翻译自定义属性,例如placeholder
和value
。
另一个问题是我的翻译方式。只要点击按钮Chi
,Eng
,我就会初始化翻译(但我不确定这是否正确)。 编辑我想我找到了如何解决这个问题(我需要使用setLng):i18n.setLng(lang, function(t) { ... })
答案 0 :(得分:30)
在直接询问i18next creator这个问题之后,我收到了following reply:我需要的是将自定义属性放在翻译元素的前面。这是一个例子:
<div data-i18n="[title]titleTransl"></div>
<input data-i18n="[placeholder]placeTransl" value="name">
如果需要多个属性,请将它们分隔为;
。
我通过这个学到了两件事:
答案 1 :(得分:10)
对我来说,以下工作
<input data-i18n="[placeholder]placeTransl" value="name">
只需在[]之间输入属性的名称,然后翻译。
答案 2 :(得分:0)
考虑致电
$('body').i18n()
.done()函数内部。您应该告诉在哪里寻找本地化程序。 无需在data-i18n属性中调用[placeholders]即可。