使用i18next(占位符,值)翻译自定义属性 [英] Translate custom attributes with i18next (placeholder, value)
问题描述
我正在调查 i18next 本地化库的可能性。
I am investigating what is possible with i18next localization library.
现在我有以下代码(完整小提琴在这里):
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();
});
});
});
它翻译所有文本
元素,但是问题是我无法翻译自定义属性
。例如div中的文本被翻译,但我无法理解如何翻译自定义属性,如占位符
和值
。
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">
如果需要多个属性,请用; $ c分隔它们$ c>。
If multiple attributes are needed, separate them by a ;
.
我从中学到了两件事:
- 我有阅读更好的文档。
- 118下一个创建者真的很有帮助(这是对他的感谢)。
这篇关于使用i18next(占位符,值)翻译自定义属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!