Marionette 2.0 - Uncaught ViewDestroyedError: View has already been destroyed and cannot be used.

Question

Struggling a bit to get my head round a problem in Marionette 2.

In various parts of my app I have the following trigger so when the currency is changed the views are rendered.

App.on("currency:change", function() {
          cartView.render();
          totalsView.render();
        });

This works fine on the individual pages if loaded by refreshing the page, but on navigating between 2 pages with this I get the error.

Uncaught ViewDestroyedError: View has already been destroyed and cannot be used.

On investigation it looks it's trying to render a view from the previous page.

Each page is defined by a module which is started and stoped as loaded or closed, and the views seem to being destroyed, so a bit confused as to how this is happening. My first assumption is the views from the previous page haven't been fully removed, but I thought this was something Marionette did automatically.

You can't reuse a view that has already been closed. If you are using regions, then Marionette will automatically be destroying old views that have been replaced. You should not reuse a view that has been removed from the DOM. — Andrew Hubbs
I just upgraded to 2.0 and now being hit with the same problem. @AndrewHubbs explicitly why though? Surely there are scenarios, certainly from an optimization POV, where caching a view makes sense. — James

Jakub Złoczewski Jakub Złoczewski · Accepted Answer · 2014-10-22T18:20:58

I looks like you are using references to views that have been already removed. My first assumption is that you should recreate views:

App.on("currency:change", function() {
      cartView = new CartView();
      totalView = new TotalView();


      cartRegion.show(cartView)
      totalRegion.show(totalView);

});

I'm not sure how your application works but I can guess that you have something like currencyCollection or currencyModel. If yes your views should listen to changes on that model and refresh themselves and then "currency:change" event will be not needed anymore.

Marionette 2.0 - Uncaught ViewDestroyedError: View has already been destroyed and cannot be used.

1 Answers