использование одного div в качестве контейнера для нескольких основных представлений с потерей привязки событий

Итак, у меня есть навигация и концепция приборной панели. В моем маршрутизаторе, когда я нажимаю на ссылку навигации, я вызываю панель управления, чтобы установить активную вкладку.

Например:

NAV

<a href="#" class="dashabord_tab" id="widgets">Widgets</a>
<a href="#" class="dashabord_tab" id="Foobars">Foobars</a>

dashboard_container.jst.tpl

<div id="nav"></div>
<div id="current_tab"></div>

DASHABORDVIEW

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, который всегда остается открытым... Если я не могу сделать это так, как я хотел бы, есть ли альтернатива способу, который я только что показал выше? Спасибо!

5
задан jdkealy 23 May 2012 в 02:08
поделиться