Marionette's Take on the Undead: Zombie Perspectives

Question

Marionette's Take on the Undead: Zombie Perspectives

Error in JS Console:

Uncaught ViewDestroyedError: View (cid: "view351") has already been destroyed and cannot be used. backbone.marionette.js?body=1:1715

Code Snippet:

initialize: (options) ->
  HWAs = @model.get('homework_assignments')
  @collection = new App.Collections.HomeworkAssignments(HWAs)
  @collection.on "sync", =>
    @render()
  @collection.fetch()

Zombie views are appearing when following these steps:

Visit the page with the code above
Navigate back using the browser's back button
Click on a link leading to the view containing the code above

Can anyone suggest a solution for this issue?

javascript backbone.js marionette

Answer 1

Answer №1

There isn't much code provided, but based on what's there, it seems like the issue lies in how the collection is bound to the view class.

Each time a view of this class is instantiated, the collection is bound to it. However, when a view of this class is destroyed, the binding to @collection is not properly cleaned up. This results in the sync function trying to call refresh on instances of the view that may no longer be valid due to re-rendering of parent elements or other factors.

A possible solution would be to add a cleanup function in the view:

onBeforeClose: () ->
    @collection.off("sync", @render())

You may also need to adjust the sync function syntax as follows:

@collection.on("sync", @render())

It's uncertain if Backbone will interpret an anonymous function calling @render() the same way as the @render() function itself. In any case, using an anonymous function for such calls adds unnecessary complexity.

Answer 2

There isn't much code provided, but based on what's there, it seems like the issue lies in how the collection is bound to the view class.

Each time a view of this class is instantiated, the collection is bound to it. However, when a view of this class is destroyed, the binding to @collection is not properly cleaned up. This results in the sync function trying to call refresh on instances of the view that may no longer be valid due to re-rendering of parent elements or other factors.

A possible solution would be to add a cleanup function in the view:

onBeforeClose: () ->
    @collection.off("sync", @render())

You may also need to adjust the sync function syntax as follows:

@collection.on("sync", @render())

It's uncertain if Backbone will interpret an anonymous function calling @render() the same way as the @render() function itself. In any case, using an anonymous function for such calls adds unnecessary complexity.

Marionette's Take on the Undead: Zombie Perspectives

Answer №1

Similar questions

Steps to remove a specific child element using jQuery:

Click the link to find the JSON node that corresponds to the onclick event

The function of style.marginRight differs from that of style.marginLeft

Conditional rendering of a component in ReactJS while maintaining the "empty" space

Encountered a type error while attempting to render and define table columns within a material table component in

Filtering Key Presses in Quasar: A Comprehensive Guide

What is the process for creating a server-side API call?

Formatting HTTP HTML response in Vue.js can be achieved by utilizing various methods and techniques

Using Key Press to Rotate Messages - Jquery

Unable to locate module: Unable to locate the file './Header.module.scss' in '/vercel/path0/components/Header'

When attempting to use nodejs's collection.find() method with MongoDB, no response is received

Create a variety of charts using the same data object in Highcharts

The issue of overflow-y not functioning properly in conjunction with ng-repeat has been observed

Are you harnessing the power of Ant Design's carousel next and previous pane methods with Typescript?

No definition found for state

the attempt to send an array of data to the $.ajax function was unsuccessful

Having trouble accessing a DOM element within a Vue component while using vanilla JavaScript

The text-center alignment in Bootstrap doesn't seem to be applying to buttons

Clear out a collection in backbone.js

What is the best way to eliminate the left padding on a TimelineItem component?