14

It seems like calling component.destroy() does not actually destroy the component from the lightning cache. I am having to manually destroy my component to avoid duplicated application events as seen here, but it seems like it is not behaving the way I expect it to.

Whichever component is loaded first in the queue will not be recreated when navigating back to it. Here is the example. https://vid.me/QGCY

TestTabA.cmp

<aura:component  implements="force:appHostable">
  <ltng:require scripts="{!join(',', '/resource/Mynamespace__JQuery' )}" afterScriptsLoaded="{!c.initJS}" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event="aura:locationChange" action="{!c.updateDestroy}"/>
</aura:component>

TestTabAController.js

({
    initJS : function(component, event, helper) {
        if (component.isValid()) {
            console.log("loaded JS for tab A");
        }
    },
    doInit : function(component, event, helper) {
        if (component.isValid()) {
            console.log("called init for tab A");
        }
    },
    updateDestroy : function(cmp, event, helper) {
        cmp.destroy();
    },
})

TestTabB.cmp

<aura:component  implements="force:appHostable">
  <ltng:require scripts="{!join(',', '/resource/Mynamespace__JQuery' )}" afterScriptsLoaded="{!c.initJS}" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event="aura:locationChange" action="{!c.updateDestroy}"/>
</aura:component>

TestTabBController.js

({
    initJS : function(component, event, helper) {
        if (component.isValid()) {
            console.log("loaded JS for tab B");
        }
    },
    doInit : function(component, event, helper) {
        if (component.isValid()) {
            console.log("called init for tab B");
        }
    },
    updateDestroy : function(cmp, event, helper) {
        cmp.destroy();
    },
})
6
  • Having viewed your video, I find myself confused. Are you trying to create a new instance of a component in the DOM you want to navigate to, at the same time you destroy the current one "onClick"? It seems counter intuitive to me that you'd expect to be able to navigate to a location in the DOM you're simultaneously removing. When you "click" and "destroy" it, that location no longer exists. It seems you'd need to create a new component in the DOM after destroying the existing one.
    – crmprogdev
    Feb 22, 2017 at 14:05
  • @crmprogdev : I am just trying to destroy the old component when I navigate away from it. I am not trying to create anything (are components not initialized by the framework when you navigate to a new tab with a component in it?) When I navigate to tab B, component B is created by the framework. When I navigate to tab A, I destroy component B, and component A is created by the framework. When I navigate back to tab B, component B should be created by the framework, but is not. Why it is not being created is the question here.
    – Jason Lee
    Feb 22, 2017 at 18:04
  • Thank you for the clarification. Your question was unclear to me and your code didn't seem to make it any clearer. You're saying the components are children of the tabs? What version of jQuery are you using? FYI, only versions 2.2.2 and 2.2.4 will work with Locker Service. Is also unclear why you need jQuery library in your component. Most all can be done native with Lightning instead of using jQuery.
    – crmprogdev
    Feb 22, 2017 at 18:41
  • @crmprogdev : I tried to make a minimal repro of what I see in my org, and I import JQuery to use other libraries that require it, so I just included it here as part of the example
    – Jason Lee
    Feb 22, 2017 at 19:08
  • I can't reproduce this behavior. Probably SFDC has already fixed that
    – Patlatus
    Oct 9, 2017 at 13:33

1 Answer 1

1

I found some issues when you try to destroy yourself, but it works much better when your parent destroys you. Try putting a wrapper component, with your component in a DIV section. and when the location is changed, then set the v.body of that div to and empty list of components:

cmp.set("v.body", []);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.