Crushing a Marionette Controller in Backbone.js

I'm trying to figure out how to properly destroy a Marionette controller. As I delve into understanding Marionette and Backbone garbage collection, I'm encountering some hurdles...

The controller in question creates multiple views, each potentially with several event listeners bound to them. The structure of the code is like this:

myController.js
---------------
Marionette = require('backbone.marionette');
MyView     = require('path/to/myView');

var MyController = Marionette.Controller.extend({
    initialize: function(options) {
        console.log('init');
    }
    onDestroy: function() {
        console.log('should be destroyed');
    }
    showData: function() {
        console.log('create view');
        myView = new MyView();
    }
});



appController.js
----------------
MyController = require('path/to/myController');

var controller = new MyController()
controller.showData();
controller.destroy();


output:
//init
//create view
//should be destroyed

Even though the onDestroy method runs, the Controller persists...

I suspect it could be due to event listeners still being attached to the views. Pardon any strange formatting; I've translated this from CoffeeScript.

Answer №1

If you need to invoke the destroy function, just utilize the "close" function within the Marionette controller's prototype:

controller.close();

The specific method that gets executed is onClose.

To gain more insight, feel free to verify this in the developer console:

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

Configuring Tailwind CSS with PostCSS in a Nuxt project

Error Message "In order to avoid issues with features like alias resolving inside your CSS, please make sure to use build.postcss in your nuxt.config.js file instead of an external configuration file. Support for external config files will be depreca ...

Using data attributes in Material UI: A comprehensive guide

Recently, I started integrating Material Design React into my project. However, I encountered an issue where the data-someField does not pass the value to the dataset map. For example: <Input data-role=‘someValue’ onChange={this.onChange} /> o ...

Using JavaScript, capture the current date and time and store it in a .txt file with the corresponding format

Objective: Upon clicking the download link, an automatically named file will be downloaded with today's date and time format. For example, 7-3-2021 04:04:00 PM or any applicable format with the date and time included in the name. Below is the code sn ...

Guide to displaying a quick message and then redirecting the page upon clicking a button in ASP.NET

Hello, I am encountering an issue with a submit button on my page. I want the user to be prompted with a message saying "Are you sure to submit that page really" when the submit button is clicked, and if they click yes, then it should redirect to another p ...

Enhance Your HTML Skills: Amplifying Table Display with Images

Recently, I utilized HTML to design a table. The Table Facts : In the first row, I included an appealing image. The second row contains several pieces of content. In continuation, I added a third row. The contents in this row are extensive, resulting i ...

Encountering issues with implementing router.push in Reactjs

Currently, I am working on ReactJS and utilizing Next.js. My current task involves refreshing the page (using routes), but I encountered an error message stating: Error: No router instance found. You should only use "next/router" inside the client-side of ...

Encountering a "403 Forbidden" error upon deployment to the server due to

Situation: I am developing a website using Spring web MVC, JSP, and HTML/JavaScript. One of the features I have implemented is a search function that communicates with imdbapi.org to retrieve movie/TV show information in JSON format via AJAX. The JSON resp ...

Troubleshooting issues with displaying anchor tags using Jquery

I am facing an issue where I am unable to make an anchor tag visible using the .show() method in JQuery or JavaScript. The Conn Window is visible by default, and I am able to hide and display the div, but the same does not apply to the anchor tag. Interest ...

What is the best way to move information between two functions using jQuery?

When using the sortable jQuery, how can I pass variable data from one function to another? I have the following: start:function(event,ui){ var data="xyz";} and receive:function(event,ui){ } I am looking to retrieve the value of var data in the receive ...

utilizing a returned list from a controller in an ajax request

When using an ajax call to store data in a database and the controller returns a list of commentObjects, how can this list be accessed in a JSP file? function StoreCommentAndRefreshCommentList(e) { var commentData = document.getElementById(ActualComme ...

Learn how to organize a div element containing select options using categories such as gender and shoe size, similar to the filtering

Is there a way to sort div elements using a select menu, similar to how it is done on shopping websites? I am struggling with modifying my JS code in order to implement multiple selects. Although I believe my JS code is correct, it doesn't seem to be ...

Adding a variable to the .append function in HTML code

I am currently working on a way to include the current date and time when a user comments on a post in my forum. While I have successfully managed to upload the text inputted by the user into the comment section, I am now looking to also dynamically insert ...

Adding a context menu to a Leaflet map

Could someone provide guidance on how to add a custom context menu to a Leaflet map in Vue 3? I am currently utilizing [email protected], @vue-leaflet/[email protected], and experimenting with [email protected]. Here is a snippet of my code: ...

Ways to update the value within an object in an array stored in a BehaviorSubject?

My initial data is: const menuItems = [{id: 1, active: false}, {id: 2, active: false}] public menuSubject$ = new BehaviorSubject<MenuItem[]>(menuItems); public menu$ = this.menuSubject$.asObservable(); I am attempting to update the element with ...

"Tips for stopping users from using Ctrl+U to view page source in

Is there a way to prevent users from viewing the source code (HTML + JavaScript) of a page by disabling Ctrl+U in the browser? ...

Refresh ngx-graph with updated information

I'm experimenting with swimlane ngx-graph in my app, where users can delete or add nodes. How do I update the graph without refreshing the entire page? ...

Troubleshooting: GSAP Scrolltrigger malfunctions when using multiple triggers

Having multiple triggers with different functionalities: Show or remove a canvas Change the background color of a section Play or pause video when in view Play or pause CSS animation The first two triggers work fine individually, but I am encountering an ...

Populate a select list in real time with dynamically generated options

I'm facing a challenge at the moment; I am using JavaScript to dynamically generate select boxes, however, I require Ajax to populate them with options. At the moment, my code is returning undefined and I am unsure of how to proceed. While my PHP succ ...

Leveraging the keyword 'this' within an object method in node's module.exports

My custom module: module.exports = { name: '', email: '', id: '', provider: '', logged_in: false, checkIfLoggedIn: function(req, res, next){ console.log(this); } }; I inclu ...

Managing onChange in ReactQuill Editor: Best Practices

I am using the ReactQuill component in my React project. On my page, I have multiple components such as TextBox, InputNumber Box, and DropDown, each of which calls an event. <TextField error={this.state.postForm.isValidationActive && !this.stat ...