JSFiddle - React, Tailwind, and code Playground

by dashk

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'
    },
    
    initialize: function() {
        var me = this;
        if (this.language) {
            console.log('Updating routes for ' + this.language);
            
            _.each(_.keys(this.routes), function(key) {
                me.routes[(me.language ? me.language + '/' : '') + key] = me.routes[key];
                delete me.routes[key];
            });
        }
    },
    
    getLanguage: function() {
        return this.language || 'fr';
    },
    
    showPage: function(page) {
        console.log(PageContent[this.getLanguage()][page]);
    }
});

var EnglishRouter = BaseRouter.extend({
    language: 'en'
});

new BaseRouter();
new EnglishRouter();

Backbone.history.start({ pushState: false });