web-dev-qa-db-ja.com

i18next（プレースホルダー、値）を使用してカスタム属性を変換します

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がクリックされるたびに、翻訳を初期化しています（ただし、これが正しい方法かどうかはわかりません）。 編集この問題を解決する方法を見つけたと思います（setLngを使用する必要があります）：i18n.setLng(lang, function(t) { ... })

javascriptlocalizationglobalizationi18next
13
Salvador Dali

i18nextcreator この質問を直接尋ねた後、 次の返信 を受け取りました。必要なのは、翻訳要素の前にカスタム属性を配置することだけです。次に例を示します。

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

複数の属性が必要な場合は、それらを;で区切ります。

私はこれによって2つのことを学びました：

  • 私はより良いドキュメントを読まなければなりません。
  • 118nextの作成者は本当に役に立ちます（これは彼への感謝の言葉です）。
34
Salvador Dali

私にとって、以下はうまくいきました

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

したがって、[]と翻訳の間に属性の名前を入力するだけです。

10
Skullbox