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

Translate custom attributes with i18next (placeholder, value)(使用 i18next(占位符,值)翻译自定义属性)
本文介绍了使用 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 内的文本已翻译,但我不明白如何翻译自定义属性,如 placeholdervalue.

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(占位符,值)翻译自定义属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)