I've created a simple component to show my issue:
Markup (testComp.cmp):
<aura:component description="testComp">
<aura:attribute name="testAttr" type="List" default="[[[1, 2], [2, 3], [3, 4]]]" />
<button onclick="{!c.doSomething}" />
<aura:iteration items="{!v.testAttr}" var="testVal">
<aura:iteration items="{!testVal}" var="innerVal">
<div aura:id="innerTestDiv" />
</aura:iteration>
</aura:iteration>
</aura:component>
JSController (testCompController.js):
({
doSomething : function(component) {
var items = component.find('innerTestDiv');
alert('Total components: ' + items.length);
var test = component.get('v.testAttr');
component.set('v.testAttr', test);
}
})
Every time I click the button and set the value of "testAttr" again for the aura:iteration to iterate over it, the amount of objects returned from component.find('innerTestDiv') is increased, because the old components aren't being deleted and still seem to be on the DOM.
I've tried setting testAttr to null or an empty array before resetting it, but it doesn't help.. the moment that component.set('v.testAttr', test) is executed, the aura:iteration creates a new set of components.
Is there any way to clear the old components/elements so that only the new ones will be displayed?
I need it because I'm trying to dynamically collect the data from all the fields on the screen and currently I've done it by embedding components inside other components and just gathering information from them.. but once I encounter this issue of reiterating again, I can't rely on the created components any longer.