使用单个div作为多个骨干视图丢失事件绑定的容器

Question

好的,所以我有一个导航和仪表板的概念.在我的路由器中单击导航链接时,我正在调用仪表板视图来设置活动选项卡.

例如:

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放在一个始终保持开放的active_tab div中...如果我不能按照我喜欢的方式去做to,有没有替代我上面展示的方式？谢谢!

Answer 1

当你使用.html(dom_object):

$(this.el).find("#current_tab").html(this.widgets_view.el);

你实际上是这样做的:

$(this.el).find('#current_tab').empty().append(this.widgets_view.el);

并且empty:

在删除元素本身之前从子元素中删除其他构造(如数据和事件处理程序)[以避免内存泄漏]

所以,一旦你加入,也就是说,widgets_view要#current_tab,然后.html(this.foobars_view.el),对这些事件widgets_view.el都没有了.你的.html电话第一次工作正常,因为没有任何东西,#current_tab所以没有任何事件要解开.

您可以通过delegateEvents在混合中添加简单调用来重新绑定事件来使用"重用视图"方法:

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);
  this.widgets_view.delegateEvents(); // <--------------- you need this
}

虽然我在这里,你可以使用this.$('#current_tab'),而不是$(this.el).find('#current_tab')和this.$el代替$(this.el).

演示:http://jsfiddle.net/ambiguous/75KuW/1/

请注意,上面的切换选项卡会保留<input type="text">元素的内容.如果您不需要这种行为,那么您可能最好根据需要删除和实例化视图,而不是保留所有视图并将它们交换进去.

此外,如果您WidgetsView(和朋友)内部有其他Backbone视图,您将不得不一直调用delegateEvents所包含的视图.在这种情况下,bind_events视图上的某种方法是有意义的:

this.widgets_view.rebind_events(); // delegateEvents() all the way down this view subtree