使用 i18next (placeholder, value) 翻譯自定義屬性

Question

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

現在我有以下代碼（完整的小提琴在這里）：

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 ，我都會初始化翻譯（但我不確定這是正確的方法）。 編輯我想我找到了如何解決這個問題（我需要使用 setLng）： i18n.setLng(lang, function(t) { ... })

Answer 1

在直接向i18next creator詢問這個問題后，我收到了以下答復：我所需要的只是將我的自定義屬性放在翻譯元素前面。 下面是一個例子：

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

如果需要多個屬性，用;分隔它們; .

我從中學到了兩件事：

• 我必須閱讀更好的文檔。
• 118next 的創建者真的很有幫助（這是對他的感謝的話）。

Answer 2

對我來說，以下工作

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

因此，只需在 [] 之間輸入屬性名稱，然后再輸入翻譯。

Answer 3

考慮打電話

$('body').i18n()

在 .done() 函數中。 你應該告訴在哪里尋找定位器。 這將無需在 data-i18n 屬性中調用 [placeholders] 即可工作。