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

var BaseRouter = Backbone.Router.extend({
    language: null,
    pages: 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 + '/' + key] = me.routes[key];
                delete me.routes[key];
            });
        }
    },
    
    getLanguage: function() {
        return this.language || 'fr';
    },
    
    showPage: function(page) {
        console.log('Shows ' + page + ' in ' + this.getLanguage());
    }
});

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

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