Geek asks and answers

Using a single div as a container for multiple database views that lose event bindings

Ok, so I have navigation and a dashboard concept. In my router, when I click on the navigation link, I call my toolbar view to set the active tab.

For instance:

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

problem:

Therefore, when switching to widgets_tab or foobar_tab for the first time, the tab loads as expected. However, if I switch to the tab, disconnect from it, and then return to it, all the events in my view are no longer connected. If you click, then no, none of the views inside foobars_view, for example, is available for clickability, freezing, etc.

In the past, I created a wrapper for each of the child views:

, pita:

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

More articles:


All Articles