Итак, у меня есть навигация и концепция приборной панели. В моем маршрутизаторе, когда я нажимаю на ссылку навигации, я вызываю панель управления, чтобы установить активную вкладку.
Например:
<a href="#" class="dashabord_tab" id="widgets">Widgets</a>
<a href="#" class="dashabord_tab" id="Foobars">Foobars</a>
<div id="nav"></div>
<div id="current_tab"></div>
DashboardView = Backbone.View.extend({
template:JST.dashboard_container,
render: function(){
$(this.el).html(this.template());
},
activateWidgets: function(){
if(!(this.widgets_view)){
this.widgets_view = new WidgetsView();
this.widgets_view.render();
}
$(this.el).find("#current_tab").html(this.widgets_view.el);
},
activateFoobars: function(){
if(!(this.foobars_view)){
this.foobars_view = new FooBarsView();
this.foobars_view.render();
}
$(this.el).find("#current_tab").html(this.foobars_view.el);
}
});
Таким образом, при первом переключении либо на widgets_tab, либо на foobar_tab вкладка загружается, как и ожидалось. Однако, если я переключусь на вкладку, выйду из нее, а затем вернусь к ней, все события в моем представлении больше не будут связаны. Щелчок, перемещение, ни одно из представлений внутри foobars_view, например, не является кликабельным, наводимым и т. д.
В прошлом я делал оболочку для каждого из дочерних представлений, например так:
activateFoobars: function(){
$('.tab_wrapper').hide();
if($(this.el).find("#foobars_wrapper").length < 1){
$(this.el).append("<div class='tab_wrapper' id='foobars_wrapper'></div>");
this.foobars_view = new FooBarsView();
$(this.el).find("#foobars_wrapper").html(this.foobars_view.render().el);
}
$('#foobars_wrapper').show();
}
Я бы предпочел не делать это так, как я только что показал выше, и мне очень нравится идея просто поместить el представления в div active_tab, который всегда остается открытым... Если я не могу сделать это так, как я хотел бы, есть ли альтернатива способу, который я только что показал выше? Спасибо!