Question

Let’s suppose I have a web application made with Backbone,
which use Backbone.Router for routing client-side pages.

Let’s suppose the page layout looks like this:

link_1 |
link_2 | Right
link_2 |  

And the Router is the following:

routes: {
    'link_:id': 'renderRight'
}

When the user click on l1, l2 or l3 it opens the view on the Right part of the window.
But let’s suppose the user want to see the Right part in a new window.
For how the router works, it will render the full Vies (right and left).
How can I fix this problem?

P.S.:
For creating the left part containing the link (LinkView) I have the following ContainerView which creates different instance of LinkView (one for each link):

var ContainerView = Backbone.View.extend({

   // ContainerView Left Part

    addAll: function ()
    {
        this.collection.each(this.addOne);
    },

    addOne: function (task)
    {
        var view;
        view = new LinkView({ 
            model: task
        });

        this.$("#linkContainer").append(view.render().el);
    },

    // other codes

});

Answer 1

You will have to find a way to differentiate between new window, and an existing document with a menu.

The easiest way i can think of to do this is by using Backbone.history. When you are on the root path, you can render the menu and create an el for the right part to attach to. Then when a linked is clicked, you catch it and have the app router navigate to your link route. Here you can have your renderRight route check for an existence of an a right-el and attach to that, if not then this is a new page, so create an el and attach. This solves your trouble on a right-click new-page or a direct navigation to root/link:id scenario as your left menu wouldn’t be existing and solve your problem of having the view render full page without it.

• root – render menu, and create right el.
• link_:id – check for existence of el, if not create and attach to that.

edit: here’s a sample of what i mean

var Application = Backbone.Router.extend({

    routes: {
        "": "root"
        'link_:id': 'renderRight',
    },


    root: function() {
        //rednder link container
        var menu = new ContainerView();
        $('body').append('<div id="linkContainer"/>','<div id="rightContainer"/>'); //create left and right container
        menu.render();
        //render initial view of right container etc..


    },

    renderRight: function () {

        if ($('#rightContainer').length == 0) $('body').append('<div id="rightContainer"/>');  //check if a rightContainer is available if not create one
        //render right container to  #rightContainer
    }

});
var app = new Application();
Backbone.history.start();