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:

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

Can anyone suggest a solution for this issue?

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing automatic line breaks in Bootstrap

When setting the "overflow scroll able" option, I want it to only allow scrolling in the y direction and if x content overflows, a line break should occur. I tried applying 'white-space', but it didn't work as expected. <ul class="s ...

Setting URL parameters in a POST request: A guide

Currently, the data in question is structured as JSON within this code snippet. However, I've received feedback indicating that it should actually be implemented as URL parameters. I'm currently facing some difficulties with modifying this to fit ...

The i18next.t function is returning an undefined value

I am experiencing an issue with my application's routes, as the .js file that contains them seems to be causing the problem: import i18n from "i18next"; const dashRoutes = [ // ... { path: "/user-profile", navbarName: ...

Issue with Div element not appearing on Azure AD B2C page customization

Utilizing PopperJS, I attempted to incorporate a popover box that appears when the user focuses on the password field within an Azure AD B2C page customization. Despite noticing the presence of the box element, it fails to display as intended. Any assistan ...

Pass PHP date to JavaScript and increase its value

I'm looking to retrieve the server time with PHP and store it in a JavaScript variable. Once stored, I'd like it to continuously increment. Below is the code snippet: function initTime(date){ var today=new Date(date); var h=today.getHours(); v ...

Ways to avoid executing JavaScript code that is outputted in PHP

My question relates to the code snippet below, which is obtained via the jquery Data object on a php page. echo " var $d = $('<div/>', { id: 'hi' + $('#textResp').children().length, class: 'even ...

Employ Angular within the parameters of a JavaScript function call

My goal is to incorporate Google Maps into my webpage for various locations (lieux). Within the HTML page, I have the necessary function set up for Google Maps. <script> function initialize(long,lat) { var mapCanvas = document.getElementById( ...

AngularJS: How to accurately retrieve the offsetTop value upon page initialization

Issue: I am facing difficulty in obtaining the accurate top offset value of a DOM element immediately after the page has loaded. In the project I am currently working on, it is essential to retrieve the offsetTop value of various DOM elements as soon as ...

What is the best way to assign a value to the param tag of an applet using JavaScript variables

This is my external javaScript file named myJs.js function search(){ var hint = document.getElementById("sChoice").value; var item = document.getElementById("sKey").value; document.getElementById("c").value=hint; document.getElementById ...

Is it possible for a Titanium application to utilize the iOS sharing functionalities?

I am looking to integrate a share feature in my app that allows users to easily share content by clicking on a share icon. I want the iOS share page to appear from the bottom of the screen, giving users options to share via message, mail, Twitter, and Face ...

Uninitialized Array Member in Angular 8

Can anyone explain why the code snippet below is printing "undefined"? I have created several objects and intended to display the corresponding images, but after iterating through them using ngfor, nothing appeared. To investigate, I logged the array and ...

Error updating model: The `teams` model cannot be modified once it has been compiled

After spending hours researching on StackOverflow, I came across numerous articles related to my issue. However, I am still unable to identify what mistake I have made here. Here is my code: models/Team.js const mongoose = require('mongoose'); ...

Implementing automatic activation of a tab upon page load using Angular

I am currently working with a set of Bootstrap nav pills in my navigation bar. The 'ng-init' code in my Angular script sets the 'dateState' to 'past' on page load. However, I have noticed that the 'Past Events' nav p ...

Adjusting the focal point of a brochure on open street map

I am currently working on initializing a map in an Angular application using leaflet with openstreetmaps. I have set the center of the map so that it is displayed to the user when they open the site. However, I am now trying to figure out how to dynamica ...

Using JavaScript to consume ASP.net Script Services

My ASP.NET script service needs to be accessed from JavaScript using JSONP due to cross-domain restrictions. When dealing with a complex input structure, I have to construct the client-side input structure myself. How does the matching between the client ...

What is the best way to update the values of an array of object properties using an input form in JavaScript?

I'm currently learning node.js, express.js, and handlebars I am working on creating two forms for a blog/news page: an add form and an edit form. /addproject: app.get('/addproject', function(req, res) { res.render('addprojec ...

Is the unit test for attribute failure specific to running it on only one node?

I am currently using Enzyme and Jest to verify the presence of an id attribute in a dropdown list. import React from "react"; import { mount } from "enzyme"; import ListPicker from './ListPicker.js' describe("ListPicker", () => { let props ...

Issue with implementing jQuery tab functionality

I'm just starting to learn JS, HTML, and CSS, and I could use some guidance on setting up jQuery tabs. Currently, I'm encountering an error that says "Uncaught TypeError: $(...).tabs is not a function". Any help would be greatly appreciated. Than ...

Activate the display by utilizing the getElementsByClassName method

In my design, I'd like to have the "Don't have an account?" line trigger the display of the .registrybox class when clicked. However, the script I've written doesn't seem to be working as intended. The script is meant to hide the .login ...

What are the downsides of using PHP redirects instead of JavaScript redirects, given that most large websites opt for the latter?

After closely examining the source codes of redirect pages on several major websites that redirect to their sponsors, I found an interesting pattern. Out of the five websites analyzed, four were using different Javascript redirects: <script type="text ...