Перевести пользовательские атрибуты с помощью i18next (placeholder, value)

Question

Я изучаю, что возможно с помощью библиотеки локализации i18next.

Сейчас у меня есть следующий код (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.

Другая проблема заключается в моем способе перевода. Всякий раз, когда нажимается кнопка Chi, Eng, я инициализирую перевод (но я не уверен, что это правильный путь). Edit Я думаю, что я нашел, как решить эту проблему (мне нужно использовать setLng): i18n.setLng(lang, function(t) { ... })

Answer 1

Задав i18next creator этот вопрос непосредственно, я получил following reply: все, что нужно поставить свой собственный атрибут в передней части перевод. Вот пример:

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

Если требуется несколько атрибутов, разделите их ;.

я узнал 2 вещи от этого:

• я должен прочитать больше документации.
• Создатель 118next действительно полезен (это замечание спасибо для него).

Answer 2

Для меня следующая работал

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

Так просто введите имя атрибута между [], а затем перевод.