javascript 使用 i18next (placeholder, value) 翻译自定义属性

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22728797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 23:41:11  来源:igfitidea点击:

Translate custom attributes with i18next (placeholder, value)

javascriptlocalizationglobalizationi18next

提问by Salvador Dali

I am investigating what is possible with i18nextlocalization library.

我正在研究i18next本地化库的可能性。

Right now I have the following code (full Fiddle is here):

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

HTML

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

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

It translates all textelements, but the problem is that I can not translate custom attributes. For example text inside the div is translated, but I can not understand how can I translate custom attributes like placeholderand value.

它翻译了所有text元素,但问题是我无法翻译custom attributes. 例如,div 内的文本已翻译,但我不明白如何翻译placeholdervalue

Another problem is with my way of translation. Whenever a button Chi, Engis clicked, I am initializing the translation (but I am not sure this is a correct way). EditI think I found how to solve this problem (I need to use setLng): i18n.setLng(lang, function(t) { ... })

另一个问题是我的翻译方式。每当单击按钮Chi, 时Eng,我都会初始化翻译(但我不确定这是正确的方法)。编辑我想我找到了解决这个问题的方法(我需要使用 setLng):i18n.setLng(lang, function(t) { ... })

回答by Salvador Dali

After asking i18next creatorthis question directly, I received the following reply: all I need is to put my custom attribute in front of the translation element. Here is an example:

在直接向i18next creator询问这个问题后,我收到了以下答复:我所需要的只是将我的自定义属性放在翻译元素前面。下面是一个例子:

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

If multiple attributes are needed, separate them by a ;.

如果需要多个属性,请用;.

I learned 2 things by this:

我从中学到了两件事:

  • I have to read better documentation.
  • 118next's creator is really helpful (this is a thank you remark for him).
  • 我必须阅读更好的文档。
  • 118next 的创建者真的很有帮助(这是对他的感谢的话)。

回答by Skullbox

For me the following worked

对我来说,以下工作

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

So just enter the attribute's name between [] and then the translation.

因此,只需在 [] 之间输入属性名称,然后再输入翻译。

回答by Edi

Consider calling

考虑打电话

$('body').i18n()

inside .done() function. You should tell where to look for localizer. This will work without having to call [placeholders] in the data-i18n attribute.

在 .done() 函数中。你应该告诉在哪里寻找定位器。这将无需在 data-i18n 属性中调用 [placeholders] 即可工作。