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

问题描述

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

I am investigating what is possible with i18next localization library.

现在我有以下代码(full Fiddle is here):

Right now I have the following code (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.

It translates all text elements, 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 placeholder and value.

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

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

推荐答案

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

After asking i18next creator this 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:

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

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

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

我从中学到了两件事:

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

这篇关于使用 i18next(占位符，值)翻译自定义属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！