JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://underscorejs.ru/underscore.js"></script>
<script src="http://backbonejs.ru/backbone.js"></script>
<div id="awesome-application">
<div id="greeting"></div>
<select>
<option value="en">English</option>
<option value="ru">Русский</option>
</select>
</div>
<script type="text/template" id="my-app-tpl">
<div><%= this.i18n.get('greeting') %>, <b><%= username %></b>!</div>
</script>
JavaScript
// набор параметров локали/интернационализации
var i18n = {
en : {
language : 'English',
greeting : 'Hello'
},
ru : {
language : 'Русский',
greeting : 'Привет'
}
};
// В самой модели локали ничего особенного
var LocaleModel = Backbone.Model.extend();
// Некая модель (для примера не имеет значения)
var MyAppModel = Backbone.Model.extend();
// Вьюха приложения, использующая данные локали
var MyAppView = Backbone.View.extend({
el : '#awesome-application',
template : '#my-app-tpl',
events: {
"change select": "setLocale"
},
initialize: function(options)
{
this.template = _.template($(this.template).html());
this.i18n = options.i18n;
this.i18n.bind('change', this.onLocaleChange, this);
this.render()
},
setLocale: function(e)
{
var locale = e.currentTarget.value;
this.i18n.set(i18n[locale]);
},
onLocaleChange: function()
{
var language = this.i18n.get('language');
console.log && console.log('locale has been changed to: ' + language);
this.render();
},
render: function()
{
var html = this.template(this.model.toJSON());
this.$('#greeting').html(html);
}
});
var app = new MyAppView ({
model : new MyAppModel({username:'John Doe'}),
i18n : new LocaleModel(i18n.en)
});