Example router module

router.js

define([
  'jQuery',
  'Underscore',
  'Backbone',
  'modules/feed',
  'modules/files',
  'modules/members',
  'modules/misc/GBL',
  'modules/misc/lightbox'
], function($, _, Backbone, Feed, Files, Members, GBL, Lightbox){
    
    // Exports
    var Router = {};

    
    // Locals
    var el = {};



    /**
     *  NoRefreshLinks
     *  
     *  This prevents the default operation of link submission for any anchor with a 'data-href' attr
     *  Usage: <a data-href='/path/to/somewhere'>Link</a>
     *  
     */
    var hijackLink = function(e){
        // preventDefault is good because it can be called at the start
        // return false has to be called at the end and in this case prevents
        // you find identifying errors. Blog Post on it: http://wilsonpage.tumblr.com/post/12201825238/event-preventdefault-vs-return-false
        e.preventDefault();
        
        var href = $(this).attr('href');// TODO: This may break in IE due to incorrect href attr returned
        
        href = href.slice(1, href.length);
        
        // use backbone to shift url
        Router.Routes.navigate(href, true);
    };
    
    
    
    
    
    /**
     *  NavigateTo
     *  
     */
    var navigateTo = function(view, options){
        //console.log(view)
        // get the correct column, return if no coumn found
        var col = el.columns.filter('#' + view + '-column');
        
        // return if no column is found
        if(!col.length){return 'No col found'}
        
        
        var index       = el.columns.index(col),// find the index of this column
            pxMargin    = -(index * col.width()),// calculate distance to move
            options     = options || {};// if no options passed in assign enty object

        
        // deciding whether to show transition or not. If a transition has not been
        // defined then set the transition value depending on whether there is a view or not.
        // If it is defined then use that value.
        options.transition = (options.transition==undefined) ? (GBL.view!=undefined) : options.transition;

        
        
        // close any open lightboxes
        //Lightbox.closeAll();


        //
        col.css({height: 'auto'});
        el.columns.not(col).css({height: 300 });// TODO: this hight should not be hard coded here
        
        
        if(options.transition){// if transition:
            
            // transtion CSS3 or JS
            (Modernizr.csstransitions) ?
            el.columnWrapper.css({ left:pxMargin }) :
            el.columnWrapper.animate({ left:pxMargin }, 500);

        }else{// if no transition:
            
            // add the .no-tranistions class to prevent css3 transition
            el.columnWrapper.addClass('no-transitions')
            
            // adjust css
            el.columnWrapper.css({ left:pxMargin });
            
            // remove the .no-transitions class 600ms later
            setTimeout(function(){
                el.columnWrapper.removeClass('no-transitions');
            },600);
        }
        
        
        // add the new $1-view clas to the #site-wrap
        $('#site-wrap')
        .removeClass("feed-view files-view members-view")
        .addClass(view + '-view');
    };
    
    


    // ROUTES
    var Routes = Backbone.Router.extend({
        
        // Route Definitions
        routes: {
            ''                  : 'feed',
            'feed'              : 'feed',
            'files'             : 'files',
            'members'           : 'members',
            ':view/:itemID'     : 'viewItem',
            
            // Default
            '*actions'          : 'feed'
        },
        

        
        feed: function() {
            Feed.show();            
            navigateTo('feed');
            GBL.view = 'feed';
        },

        

        files: function() {
            Files.show();
            navigateTo('files');
            GBL.view = 'files';
        },
        

        members: function() {
            Members.show();
            navigateTo('members');
            GBL.view = 'members';
        },
        
        
        viewItem: function(view, itemID) {
            if(!GBL.view){ this[view]() };// TODO: If no view is loaded: load the view associated with this item
            
            
            switch(view){
                case'feed': break;
                case'files': new Files.LightboxView(itemID); break;
                case'members': new Members.Views.Profile(itemID); break;
            }
        }
    });
    
    
    
    // INIT
    Router.init = function(){
        el.columnWrapper = $('#column-wrapper');
        el.columns       = $('.main-column');
        
        Router.Routes = new Routes;
        Backbone.history.start({pushState: true});

        $('a.push').live('click', hijackLink);
        
        // if no view has loaded yet, load the default view
        if(!GBL.view){Router.Routes.navigate('', true) }
    };
    
    
    // return Exports
    return Router;
});