使用i18next(占位符,值)翻译自定义属性

Question

我正在调查i18next本地化库的可能性.

现在我有以下代码(完整的小提琴在这里):

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) { ... })

Answer 1

在直接询问i18next创建者这个问题后,我收到了以下回复:我需要的是将我的自定义属性放在翻译元素的前面.这是一个例子:

<div data-i18n="[title]titleTransl"></div>
<input data-i18n="[placeholder]placeTransl" value="name">

如果需要多个属性,请用a分隔它们;.

我通过这个学到了两件事:

• 我必须阅读更好的文档.
• 118next的创建者真的很有帮助(这是对他的感谢评论).

Answer 2

对我来说,以下工作

<input data-i18n="[placeholder]placeTransl" value="name">

所以只需在[]之间输入属性的名称,然后再翻译.