How can I "destroy" a template when the page is refreshed?

I’m using Flow Router and Blaze Layout on a small app.

With onCreated and onRendered, I’m performing some reactive subscriptions and initialisations for Semantic ui dropdown menu.
Long story short, when I refresh the browser (CTRL+R/Command+R) the template is not being “destroyed”, so it’s messing up the initialisations.
I already checked by placing some console.log inside an onDestroyed callback, and it’s not firing.

What would solve my issue is just properly destroying the template when the page refreshes. Does anyone have any suggestions or alternatives?

PS: it destroys ok when I navigate away from the template using normal navigation i.e. clicking links or using the back button.

Thank you!

I think you are missing the point. When you hit ctrl+r the browser stops any JS execution, this means onDestroyed will never be fired.

1 Like

I tried something else to go around this and it worked to destroy the template:

//Inside onRendered

window.addEventListener("beforeunload", () => {
    Blaze.remove(this.view)
});

…but it turns out that wasn’t my problem :expressionless:. It must be something with a computation not being invalided properly when the page reloads. I have no clue. Anyway, thank you! I’ll figure something out later. It works for now as long as users don’t do a manual refresh…

You also can’t rely on ‘beforeunload’ if you are doing something async.
Why do you need to destroy a template when someone reloads or close the page?

Why do you need to destroy a template when someone reloads or close the page?

I thought I needed to, but that’s not case; destroying the template didn’t fix the issue.

This part of my app is basically just a list of companies. When you click a company it opens the company profile which is a pre-filled form with the information from the database, including the State where the company is located, in a dropdown menu.

This is my code for the company profile:

Template.company.onCreated(function () {
    this.autorun(() => {
         const companyId = FlowRouter.getParam("companyId");
         this.subscribe('company', companyId);
     })
});

Template.company.onRendered(function () {
     this.autorun(() => {
        if (this.subscriptionsReady()) {
            const state = Companies.findOne().state;
            this.$('.ui.dropdown').dropdown('set selected', state ? state : "ny");
        }
     })
});

So basically, when I enter this page “normally” by navigating through the application, it works fine; The dropdown menu will initialise with the correct option selected.
If I refresh this page, then the dropdown menu shows up with nothing selected: The dropdown initialisation function doesn’t run. It will run if I change the database because it invalidates the computation.