JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<a href='#en/happyPage'>Happy Page English</a>
<a href='#happyPage'>Happy Page French</a>
<a href='#en/fridayPage'>Friday Page English</a>
<a href='#fridayPage'>Friday Page French</a>
JavaScript
// Assuming you have this loaded.
var PageContent = {
'fr': {
'happyPage': 'Happy Page Content in French',
'fridayPage': 'Friday page Content in French'
},
'en': {
'happyPage': 'Happy Page Content in English',
'fridayPage': 'Friday page Content in English'
}
};
// This is the base Router
var BaseRouter = Backbone.Router.extend({
language: null,
routes: {
'*page': 'showPage'
},
_bindRoutes: function() {
// this._bindRoutes() is called in Backbone.Router before
// initialize(). Overriding native _bindRoutes method to
// accomodate the custom logic in changing route.
var me = this;
if (this.language) {
console.log('Updating routes for ' + this.language);
_.each(_.keys(this.routes), function(key) {
me.routes[me.language + '/' + key] = me.routes[key];
delete me.routes[key];
});
}
// Call native _bindRoutes method.
Backbone.Router.prototype._bindRoutes.apply(this, arguments);
},
getLanguage: function() {
return this.language || 'fr';
},
showPage: function(page) {
console.log('Showing ' + page + ' in ' + this.getLanguage());
}
});
var EnglishRouter = BaseRouter.extend({
language: 'en'
});
new BaseRouter();
new EnglishRouter();
Backbone.history.start({ pushState: false });