Question

I have this view in Backbone that changes its events depending on a users action.

So I have three views, all have been initialized.

var view1 = new MainView({el : '#view1'});

var view2 = new ProductsView({el : '#prodcuts'});

var view3 = new StoresView({el : '#stores'});

Now what I want to do is copy events from one view to another and then updating the views el. I’ve tried:

if($option == 'products') {
  view1.events = view2.events
  $("div[data-role='content']", view1.el).html(content);
} else {
    view1.events = view3.events
  $("div[data-role='content']", view1.el).html(content);
}

The problem is that even now the content is the same, and the elements are there that correspond with the events BUT the events are no longer firing. Why is this and how can I fix it?

Answer 1

You need to call the delegateEvents method.

For example something like the following (given the code you provided).

if($option == 'products') {
  view1.delegateEvents(view2.events)
  $("div[data-role='content']", view1.el).html(content);
} else {
    view1.delegateEvents(view3.events);
  $("div[data-role='content']", view1.el).html(content);
}

Also note that for removing events you use the undelegateEvents() method.