Javascript 如何使用i18next插件切换语言？

我在应用程序中使用Backbone.js，在应用程序中使用语言切换功能插件。当我将值传递给

init

函数调用中的

lng

选项时，它会正确地转换我的页面

现在我想通过一个语言选择器动态地完成这项工作。我有四种语言的

，我想将所选语言的值传递给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>

---

我不知道backbone.js

更改语言的功能是。您只需调用它，无需再次调用

init

，也无需“更改init选项”，因为选项是i18next中的属性，它们通过（函数）进行管理

在具有语言选择器的视图中：

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”：{
“翻译”：{
“标签”：“Choisir une langue”，
“fr”：“Français”，
“en”：“Anglais”
}
},
“en”：{
“翻译”：{
“标签”：“选择一种语言”，
“法语”：“法语”，
“en”：“英语”
}
}
};
i18next.init({
液化天然气：恩，
后备人才：['en'，'fr']，
资源：app.translations，
});
//捕捉事件并进行相应的更改
i18next.on（'languageChanged'，函数（lng）{
//然后重新渲染你的应用程序
app.view.render（）；
});
var LangView=Backbone.View.extend({
模板：35;.template（$（'#选择器'）.html（）），
langTemplate:u.模板（“”），
活动：{
“change.language选择器”：“onLangChange”，
},
render:function（）{
this.$el.html（this.template({
标签：i18next.t（'label'）
}));
//缓存select的jQuery对象
this.$selector=this.$（'.language selector'）；
//然后动态地填充它
this.populateSelector（）；
归还这个；
},
populateSelector:function（）{
//对于i18next中的每种语言，请在选择菜单中添加一个选项
_.each（i18next.languages，this.addLanguage，this）；
},
addLanguage:function（lang）{
//添加带有已翻译名称的选项
this.$selector.append（this.langTemplate({
价值观：朗，
名称：i18next.t（lang），
}));
},
onLangChange:函数（e）{
//改变语言
i18next.changeLanguage（如currentTarget.value）；
}
});
app.view=new LangView（）；
$（'#app'）.html（app.view.render（）.el）

您是否尝试过在更改语言后打印i18n型号，以查看设置是否有问题？如果模型真的改变了语言？@规则：我得到一个错误“i18next.setLng”不是一个函数。请检查i18next是否已初始化。。在init的回调函数中执行控制台。@SunilBN:是的，当我加载应用程序时，然后执行下一步。init（）函数已初始化，但当我通过select更改语言时，会出现错误i18next。setLng不是函数。不幸的是，此解决方案不适用于我。我想，当“液化天然气”发生变化时，我需要传递它的值。但我不知道我该怎么做？当“lng”发生更改时，也会更新init选项。已弃用，您的JSFIDLE示例甚至没有使用它。另外，喜欢堆栈代码段而不是非站点资源。@是的，我纠正了这一点。我在我的应用程序中有一个名为
i18n
的服务模块，它在后台是i18next，但忘了重新更改名称。我的视图中没有使用moment.locale。另一个选择是什么？@harsh这只是一个需要处理的示例，您可以完全忽略这个时刻。好的，但我仍然得到一个错误。在.init方法之后，我在方法上定义了“无法读取未定义的”属性“render”，并且两者都在initialize函数中。我不明白为什么会这样；在我的i18next.on方法中不起作用。当然，我知道我在做什么……）我已经发现了问题所在。我正在初始化中调用另一个API，它还需要lang参数。这就是它不起作用的原因。我需要弄清楚。但根据这个问题，你的解决方案是有效的。谢谢你。
$(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();
        });
   }
}

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);
    }
});