jquery - 使用单个 div 作为丢失事件绑定(bind)的多个 Backbone View 的容器

Question

好的，我有了导航和仪表板的概念。在我的路由器中，当我单击导航链接时，我会调用仪表板 View 来设置事件选项卡。

例如:

Assets 净值

<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>

仪表板 View

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 时，选项卡会按预期加载。但是，如果我切换到一个选项卡，再切换出它，然后切换回它，我 View 中的所有事件都不再绑定(bind)。单击、悬停，例如 foobars_view 内的任何 View 都不可单击、可悬停等。

过去，我一直为每个 subview 制作一个包装器，如下所示:

过去的解决方案，皮塔饼:

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();
  }

我宁愿不按照上面展示的方式进行操作，而且我真的很喜欢将 View 的 el 放在始终保持打开状态的 active_tab div 中的想法...如果我不能按照我的方式进行操作我想，除了我上面展示的方式之外，还有其他选择吗？谢谢!

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 :

removes other constructs such as data and event handlers from the child elements before removing the elements themselves [To avoid memory leaks]

所以一旦你添加了，比如 widgets_view至#current_tab然后.html(this.foobars_view.el) ， widgets_view.el 上的事件消失了。您的.html第一次调用工作正常，因为 #current_tab 中没有任何内容。所以没有任何事件需要解除绑定(bind)。

您可以通过添加简单的 delegateEvents 来使用“重用 View ”方法。调用 mix 以重新绑定(bind)事件:

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"> 的内容元素。如果您不需要这种行为，那么您最好根据需要删除和实例化 View ，而不是保留所有 View 并将它们换入换出。

此外，如果您的WidgetsView (和 friend )里面还有其他 Backbone View ，您必须调用 delegateEvents一直到下包含的 View 。在这种情况下，某种 bind_events View 上的方法是有意义的:

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