JSFiddle - React, Tailwind, and code Playground

by Cody Lindley

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="urlPL"><strong>url on page load:</strong><br><span></span></div>
<br>
<div id="url"><strong>current url:</strong><br><span></span></div>
<!-- functional programming utility library -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.underscore.js"></script>
<!-- DOM & XHR utility -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!-- Backbone.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>

CSS

iframe {
    height:163px !important;
}

JavaScript

//show what url looks like on page load
$('#urlPL span').text(window.location.href);

//create a Backbone Router
var myRouter = new Backbone.Router();

//tell Backbone to start listening for changes in the URL
Backbone.history.start();

//create a help route using route method, route(route, name, callback-function)
myRouter.route('help','help',function(){
    console.log('The url hash just change to /#help');
});

//change url hash to "#help"
window.location.hash = 'help';

//show what url looks like after hash change, notice the #help
$('#url span').text(window.location.href);