using a single div as a container for multiple backbone views losing event bindings

Question

Ok, so I have a navigation and the concept of a dashboard. In my router when I click on a navigation link, I'm calling on my dashboard view to set the active tab. For example: NAV ``` Widgets Foobars ``` dashboard_container.jst.tpl ```

``` 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); } }); ``` the problem: So the first time I switch to either widgets_tab or foobar_tab th…

Accepted Answer

When you use `.html(dom_object)`:

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

You're actually doing this:

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

and `empty`:

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

So once you've added, say, `widgets_view` to `#current_tab` and then `.html(this.foobars_view.el)`, the events on `widgets_view.el` are gone. Your `.html` call works fine the first time because there's nothing in `#current_tab` so there aren't any events to unbind.

You can use your "reuse the views" approach by adding simple `delegateEvents` calls into the mix to rebind the events:

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

While I'm here, you can use `this.$('#current_tab')` instead of `$(this.el).find('#current_tab')` and `this.$el` instead of `$(this.el)`.

Demo: http://jsfiddle.net/ambiguous/75KuW/1/

Note that switching tabs in the above preserves the content of the `<input type="text">` elements. If you don't need that sort of behavior then you're probably better off removing and instantiating views as needed instead of holding all the views and swapping them in and out.

Also, if your `WidgetsView` (and friends) have other Backbone views inside them, you'll have to call `delegateEvents` on the contained views all the way down. In this case, some sort of `bind_events` method on the views would make sense:

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

using a single div as a container for multiple backbone views losing event bindings

Solution

Problem