JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<!doctype html>
<html>
<head>
<title>Gone Fishin&rsquo;</title>
<body>

<p><a href="#/how-to-fish">Fish instructions</a></p>

<h3>Delicious Fish</h3>
<ul class="fish">
    <!-- fish will go here -->
    <li><a href="#fish/salmon/fish">
      Salmon
    </a></li><li><a href="#fish/grouper/fish">
      Grouper
    </a></li><li><a href="#fish/sole/fish">
      Sole
    </a></li><li><a href="#fish/ahi/fish">
      Ahi
    </a></li><li><a href="#fish/cod/fish">
      Cod
    </a></li><li><a href="#fish/halibut/fish">
      Halibut
    </a></li><li><a href="#fish/snapper/fish">
      Snapper
    </a></li>
</ul>

<hr>

<ul>
  <li><a href="fish.zip">Download project files</a></li>
  <li><a href="http://blog.rjzaworski.com/2011/12/regex-routing-with-backbone-js/">Original article</a></li>
</ul>

<script src="libs/jquery.min.js"></script>
<script src="libs/underscore.min.js"></script>
<script src="libs/backbone.min.js"></script>
<script src="fish.js"></script>

</body>
</html>

JavaScript

// a fish model
//var Fish = Backbone.Model.extend();

// a fish view
//var FishView = Backbone.View.extend({

//    tagName: 'li',

//    template: _.template('<a href="#fish/<%= name.toLowerCase() %>/fish"><%= name %></a>'),

//    render: function () {
//        this.$el.append(this.template(this.model.toJSON()));
//        return this;
//    }
//});

/**
 *  A router demonstrating the use of block regexp routes:
 */
var FishRouter = Backbone.Router.extend({

    // we'll define routes in a moment
    routes: {},

    // a handler for tasty fish
    tastyFish: function (name, param) {
        alert('Mmm...tasty ' + name + ' ' + param + '!');
    },

    // a handler for not-so-tasty fish
    untastyFish: function (name, param) {
        console.log("name = " + name);
        console.log("param = " + param);
        alert('That ' + name + ' ' + param + ' wasn\'t very tasty...');
    },

    // a handler for instructions
    fishHowTo: function () {
        alert('Choose a delicious fish from the list below.\n\n (hint: the tastiest fish start with \'s\')');
    },

    // set up default routes
    initialize: function() {

        var router = this,
            routes = [
                [ /^fish\/([a-z]+)\/([a-z]+)$/,  'getUntastyFish', this.untastyFish  ],
                [ /^fish\/(s[a-z]+)\/([a-z]+)$/, 'getTastyFish',   this.tastyFish ],
                [ 'how-to-fish',       'getAllFish',     this.fishHowTo ]
            ];

        _.each(routes, function(route) {
            router.route.apply(router,route);
            // ^ Say it ten times fast
        });
    }
});

// add a bunch of fish to the micro-app:
//_.each(['Salmon', 'Grouper', 'Sole', 'Ahi', 'Cod', 'Halibut', 'Snapper' ], function (fish) {
//    var model = new Fish({name: fish}),
//        view = new FishView({
//            model: model
//        });

//    view.render().$el.appendTo('.fish');
//});

// initialize the router
new FishRouter();

// call Backbone.history.start() to handle...