Opening a new view in a new window
-
13-06-2021 - |
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
});
Solution
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();