如何使用i18next插件切換語言？

Question

我在我的應用程序中使用Backbone.js，並在我的應用程序中使用i18next插件作為語言切換功能。 當我將值傳遞給init函數調用中的lng選項時，它會正確翻譯我的頁面。

現在我想通過語言選擇器動態執行此操作。 我有一個<select>四種語言，我想將所選語言的值傳遞給init函數的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();
    });
}

Answer 1

更改語言的功能是i18next.changeLanguage 。 您只需要調用它，不需要再次調用init或“更改init選項”，因為選項是i18next中的屬性，它們通過API （函數）進行管理。

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

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

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

在帶有語言選擇器的視圖中：

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

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

概念證明

 var 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', function(lng) { // then re-render your app app.view.render(); }); var LangView = Backbone.View.extend({ template: _.template($('#selector').html()), langTemplate: _.template('<option value="<%= value %>"><%= name %></option>'), events: { 'change .language-selector': 'onLangChange', }, render: function() { 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: function() { // for each languages in i18next, add an option to the select _.each(i18next.languages, this.addLanguage, this); }, addLanguage: function(lang) { // adding the option with the translated names this.$selector.append(this.langTemplate({ value: lang, name: i18next.t(lang), })); }, onLangChange: function(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> 

關於翻譯語言名稱，請查看語言選擇器中語言名稱的語言？

Answer 2

$(document).ready(function () {
    i18n.init({
        "lng": 'en',
        "resStore": resources,
        "fallbackLng" : 'en'
    }, function (t) {
        $(document).i18n();
    });

   'change .language-selector': function(e){
        e.preventDefault();
        i18n.init({
        lng: $(e.target).val()}, (err, t) => {
            console.log(arguments);
            $(document).i18n();
        });
   }
}

我不知道backbone.js。 普通JavaScript中的工作解決方案就在這里