14

アプリケーションで Backbone.js を使用し、アプリケーションの言語切り替え機能にi18nextプラグインを使用しています。関数呼び出しでlngオプションに値を渡すと、ページが正しく変換されます。init

今、言語セレクターを介してこれを動的に実行したいと考えています。私は4 つの言語を持っており、選択した言語の値をinit 関数<select> のオプションに渡したいと考えています。lng

これが私のコードです：

HTML

<div class="col-xs-6>
    <select class="form-control language-selector">
        <option value="de">Deutsch</option>
        <option value="en">English</option>
        <option value="fr">Français</option>
        <option value="it">Italiano</option>
    </select>
</div>

JavaScript

i18next.init({
        debug: true,
        languages: ['de','en','fr','it'],
        lng: 'de',  
        fallbackLng: false,
        load: 'current',
        resources: resBundle
    }, function(err, t){

});

'change .language-selector': function(e){
    e.preventDefault();
    i18next.setLng($(e.target).val(), (err, t) => {
        console.log(arguments);
        this.render();
    });
}
4

2 に答える 2

16

言語を変更する機能はi18next.changeLanguage. オプションは i18next 内の属性であり、API (関数)を通じて管理されるため、init再度呼び出す必要も、「初期化オプションを変更する」必要もありません。

i18next.init({
    lng: 'en',
    fallbackLng: ['en', 'de', 'fr', 'it'],
});

// catch the event and make changes accordingly
i18next.on('languageChanged', (lng) => {
    // E.g. set the moment locale with the current language
    moment.locale(lng);

    // then re-render your app
    app.render();
});

言語セレクターのあるビューで:

const LangView = Backbone.View.extend({
    events: {
        'change .language-selector': 'onLangChange',
    },

    onLangChange(e) {
        // only change the language
        i18next.changeLanguage(e.currentTarget.value);
    }
});

コンセプトの証明

const app = {};

app.translations = {
    "fr": {
        "translation": {
            "label": "Choisir une langue",
            "fr": "Français",
            "en": "Anglais"
        }
    },
    "en": {
        "translation": {
            "label": "Choose a language",
            "fr": "French",
            "en": "English"
        }
    }
};

i18next.init({
    lng: 'en',
    fallbackLng: ['en', 'fr'],
    resources: app.translations,
});

// catch the event and make changes accordingly
i18next.on('languageChanged', (lng) => {

    // then re-render your app
    app.view.render();
});

const LangView = Backbone.View.extend({
    template: _.template($('#selector').html()),
    langTemplate: _.template('<option value="<%= value %>"><%= name %></option>'),
    events: {
        'change .language-selector': 'onLangChange',
    },

    render() {
        this.$el.html(this.template({
            label: i18next.t('label')
        }));
      
        // cache the jQuery object of the select
        this.$selector = this.$('.language-selector');
      
        // then dynamically populate it
        this.populateSelector();

        return this;
    },

    populateSelector() {
        // for each languages in i18next, add an option to the select
        _.each(i18next.languages, this.addLanguage, this);
    },

    addLanguage(lang) {
        // adding the option with the translated names
        this.$selector.append(this.langTemplate({
            value: lang,
            name: i18next.t(lang),
        }));
    },

    onLangChange(e) {
        // change the language
        i18next.changeLanguage(e.currentTarget.value);
    }
});

app.view = new LangView();

$('#app').html(app.view.render().el);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/4.1.1/i18next.min.js"></script>

    <div id="app"></div>
    <script type="text/template" id="selector">
        <label>
            <%=label %>
          </label>
        <select class="form-control language-selector"></select>
    </script>

言語名の翻訳については、言語セレクターの言語名の言語をご覧ください。

于 2016-12-07T15:23:46.807 に答える