var rootNav = new RootRoute();

rootNav.when('/foo', function (fooNav) {
    // create a container widget
    console.log('entered "foo" state');
    var rootDom = $('<div>Root View</div>').appendTo('body');

    fooNav.whenDestroyed.then(function() {
        // destroy the container widget
        console.log('left "foo" state');
        rootDom.remove();
    });

    fooNav.when('/bar', function (barNav) {
        // create a sub-widget and attach to container
        console.log('entered "foo/bar" state');
        var fooDom = $('<div>FooBar View</div>').appendTo(rootDom);

        barNav.whenDestroyed.then(function() {
            // destroy the sub-widget
            console.log('left "foo/bar" state');
            fooDom.remove();
        });
    });
});

rootNav.when('/baz/:someParam', function (someParam, bazNav) {
    console.log('entered "baz" state with "' + someParam + '"');

    bazNav.whenDestroyed.then(function() {
        console.log('left "baz" state with "' + someParam + '"');
    });
});

// RootView.js: top-level "page" view
function RootView() {
    var rootNav = new RootRoute();
    var $dom = $('body');

    rootNav.when('/fizz-buzz', function (fizzBuzzNav) {
        var fizzBuzzView = new FizzBuzzView($dom, fizzBuzzNav);
    });
}

// FizzBuzzView.js: sub-component in another file which expects delegated nav state
function FizzBuzzView($dom, nav) {
    // ... render DOM, etc

    // can create sub-routes without needing to know what the parent URL is
    nav.when('/foo-bar', function (fooBarNav) {
        // render more sub-route DOM, etc
    });
}