Разделить обязанности и придерживаться его. Не помещайте отображение боковой панели в руки просмотра домашней страницы.
Вы могли бы макет вид, который обрабатывает рендеринг на содержание, заголовок, колонтитула и врезке. Затем, когда пользователь переходит к другой странице, маршрутизатор просто вызывает что-то вроде setContent(view) в представлении макета, что гарантирует, что боковая панель (и все остальное) была отображена перед рендерингом содержимого.
Предполагая, что этот шаблон:
<body>
<div class="header"></div>
<div class="content"></div>
<div class="sidebar"></div>
</body>
Вид макета может быть столь же просто, как:
var Layout = Backbone.View.extend({
el: 'body' // just for the simple example, let's put this as the body.
// This avoids repeating selector strings everywhere in the view code.
// If you change a class name in the template, change it only once here.
regions: {
header: '.header',
content: '.content',
sidebar: '.sidebar'
},
initialize: function(options) {
var regions = this.regions;
// I like to "namespace" my sub-views into an object.
// That way, you still can access them by name, but you can also
// loop on the sub-views.
this.views = {
sidebar: new SideBar({ el: regions.sidebar }),
header: new Header({ el: regions.header }),
};
this.$content = this.$(regions.content);
},
render: function() {
_.invoke(this.views, 'render');
return this;
},
/**
* Set the content to a view.
* @param {Backbone.View} view to replace the content with.
*/
setContent: function(view) {
var views = this.views,
content = views.content;
if (content !== view) {
if (content) content.remove();
views.content = content = view;
this.$content.html(content.render().el);
}
},
});
и маршрутизатор может лениво создавать виды:
var AppRouter = Backbone.Router.extend({
routes: {
'*otherwise': 'homepage',
'specific/:id': 'specificPage'
},
initialize: function() {
this.layout = new Layout();
this.layout.render();
this.views = {};
},
homepage: function() {
// These local variables improve minification and readability.
var views = this.views,
homepage = views.homepage;
if (!homepage) {
views.homepage = homepage = new HomePage();
}
this.layout.setContent(homepage);
},
specificPage: function(id){
var views = this.views,
specific = views.specific;
if (!specific){
views.specific = specific = new HomePage();
}
specific.setId(id); // hypothetical logic
this.layout.setContent(specific);
}
});