JSFiddle - React, Tailwind, and code Playground

by Rasmussen

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<body>
    <div id='header'>
        <ul id='header-nav'>
            <li><a href='#!/map'>Map</a></li>
            <li><a href='#!/about'>About</a></li>   
        </ul>
  	</div>

  	<div id='block'>
        <ul id='block-nav'>
            <li><a href='#!/map/base'>Base</a></li>
            <li><a href='#!/map/all'>All</a></li>   
        </ul>
	</div>
</body>

CSS

#header, #block {
    height: 200px;
    width: 120px;
    border: 1px solid black;
}

#header { float: left;}
#block {float: right;}

JavaScript

var BlockRouter = Backbone.Router.extend({
    routes: {
        '!/map/base': 'base',
        '!/map/all': 'all'},
    
    base: function() {alert('Base')},
    
    all: function() {alert('All')} })

var HeaderRouter = Backbone.Router.extend({
    routes: {
        '': 'about',
        '!/map': 'map',
        '!/about': 'about'},
    
    map: function() {
        $('#block ul').show()
        var blockRouter = new BlockRouter()},
    
    about: function() {$('#block ul').hide()} })

var headerRouter = new HeaderRouter()

Backbone.history.start()