Backbone Router Test New Window

this test demonstrates how to set up your app to allow a router's action to be called more than one time by clicking the same control (may be a link)

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<!--
TwitterBootstrap Skeleton
-->
<div class="container">
    
    <header class="page-header">
        <h2>BackboneTest - <small>Try to reload a Router's route by clicking to a link</small></h2>
    </header>
    
    <section id="menu">
        <ul>
            <li><a href="#/route/1">route 1</a></li>
            <li><a href="#/route/2">route 2</a></li>
            <li><a href="#/route/3">route 3</a></li>
        </ul>
    </section>
    
    <section id="app">
        This is the App Viewport.<br> 
        I will change according to the routes.
    </section>
    
    <section style="margin-top:20px;padding-top:20px;border-top:1px solid #aaa">
        <h3>How to run this example:</h3>
        <ol>
            <li><b>click</b> on "route 1", "route 2", etc and observe UI changes to understand the action triggered by these links.</li>
            <li><b>click</b> on "route 1" more than one time. Second and tird time you click the link seems to not trigger any action. UI does not change.</li>
                <li><b>uncomment</b> <code>router.navigate('/');</code> instruction into the <em>Menu</em> declaration of the JS box on the left.</li>
            <li><b>run</b> the fiddle - press "run" button on the top-left side of the toolbar</li>
            <li><b>click</b> on "route 1" more than one time. now each route's action is performed any time you click on the link!</li>
        </ol>
        
        <h3>Tutorial on MovableAPP.com</h3>
        <p>
            <a href="http://goo.gl/mJM2i">Here I wrote a tutorial to explain this example.</a>
        </p>
        
        <h3>Follow Me!</h3>
        <p>
     ...

JavaScript

/**
 * The Viewport
 *
 * This object handle what to display and how to display it into the
 * application visibile space.
 *
 */
var Viewport = Backbone.View.extend({
    
    // target item.
    el: '#app',
    
    // display a string to the target item
    render: function( str ) {
        
        // first visualization. it creates an item with the string.
        if ( this.$('em').length == 0 ) {
            
            // create the item with some attributes
            var $em = $('<em>').html( str ).css({
                background: 'yellow',
                padding: '5px',
                textAlign: 'center'
            }).hide();
            
            // append the item to the view's target
            this.$el.html( '' );
            this.$el.append( $em );
            $em.fadeIn();
        
        // following visualizations. flash out the string then flash in with
        // the new value. this way the "click" trigger a visible event to the screen!
        } else {
            
            this.$('em').stop().fadeOut(function(){
                $(this).html( str ).fadeIn();
            });
            
        }
        
    }
});

/**
 * The Menu View
 * this object handle menu actions and trigger a Router's reset action each time
 * you click to a link.
 *
 * This way you can call the same route multiple times by clicking the same link.
 */
var Menu = Backbone.View.extend({
    
    el: '#menu',
    
    events: {
        'click a' : 'onClick'
    },
    
    onClick: function( e ) {
        $(this).attr('target', '_blank');
        // uncomment this row to make it work!
        router.navigate();
        
    }

});


/**
 * The Router
 * it translates url requests into actions.
 *
 * Here we always throw the same action with different params.
 */
var Router = Backbone.Router.extend({
    
    // routes configuration
    routes: {
        'route/:id' : 'defaultRoute'
    },
    
    // the action. it uses global namespace's viewport object.
...