6

I am referencing the component instance X within multiple other components dynamically. When I remove component instance X from one of the components, it is removed everywhere. The question is: how do I remove the component instance X from one component while retaining it inside the other components.

Here is an example

componentPlaceholder.cmp

<aura:component>
    {! v.body }
</aura:component>

myapp.app

<aura:application extends="force:slds">

        <aura:attribute name="mystr" type="String" required="false" default="hello world" access="private" description="" />
        <aura:attribute name="mycmp" type="Aura.Component[]" required="false" access="private">
            <h1><aura:text value="{! v.mystr }" /></h1>
        </aura:attribute>

        <div>MyCmp</div>
        <div>{! v.mycmp }</div>

        <div style="background: red">
            <c:componentPlaceholder aura:id="first" />
        </div>

        <div style="background: yellow">
            <c:componentPlaceholder aura:id="second" />
        </div>

        <div></div>

        <ui:button  label="Set body in both component placeholder" press="{!c.updateCmps}"/>
        <ui:button  label="Set body to empty in the second component placeholder" press="{!c.removeBodyFromSecond}"/>
</aura:application>

myappController.js

({
    updateCmps : function(component, event, helper) {
        var mycmp = component.get('v.mycmp');
        component.find('first').set('v.body',mycmp);
        component.find('second').set('v.body',mycmp);
    },

    removeBodyFromSecond : function(component, event, helper) {
        component.find('second').set('v.body',[]);
    }   
})

Output

1) Screen Initialisation Hello world component declared

2) After executing Set body in both component placeholder Hello world appears in all instances

3) After executing Set body to empty in the second component placeholder pressed All refrenced to hello world are removed

As you can see in the sequence, the result is that the mycmp component is removed everywhere. However, I only want to remove it from the componentPlaceholder with aura:id of second.

2

You need two different instances of mycmp variable so that you can decouple both the aura:component variable

<aura:application extends="force:slds">

<aura:attribute name="mystr" type="String" required="false" default="hello world" access="private" description="" />
 <aura:attribute name="mycmp1" type="Aura.Component[]" required="false" access="private">
        <h1><aura:text value="{! v.mystr }" /></h1>
    </aura:attribute>
 <aura:attribute name="mycmp2" type="Aura.Component[]" required="false" access="private">
        <h1><aura:text value="{! v.mystr }" /></h1>
    </aura:attribute>
<div>MyCmp</div>   
<div style="background: red">
    <c:componentPlaceholder aura:id="first" />
</div>

<div style="background: yellow">
    <c:componentPlaceholder aura:id="second" />
</div>

  <div></div>

  <ui:button label="Set body in both component placeholder" press="{!c.updateCmps}"/>
  <ui:button label="Set body to empty in the second component placeholder" press="{!c.removeBodyFromSecond}"/>
</aura:application>

Controller JS

({
  updateCmps : function(component, event, helper) {
    var mycmp = component.get('v.mycmp');
    component.find('first').set('v.body',mycmp1);
    component.find('second').set('v.body',mycmp2);
  },

   removeBodyFromSecond : function(component, event, helper) {
    component.find('second').set('v.body',[]);
   }   
})
  • This code gives me error when I try saying myCmp is not available. Also in the question, OP is using myStr attribute inside the myCmp attribute. – javanoob Jan 22 '17 at 17:27
  • I'm sorry but it doesn't answer my question. Your example implies using different instances of the component. My intention is to use the same component instance. Also your example excludes the default value of mycmp1 and mycmp2 aura:attribute(s). – Artur Jan 22 '17 at 17:32
  • I see the error.Working on fixing it – Mohith Shrivastava Jan 22 '17 at 17:34
  • @Artur Check the answer now .The problem is if you use only variable to bind ,then because of two way binding the view is tightly bound to the variable .Hope that helps – Mohith Shrivastava Jan 22 '17 at 17:42
  • 1
    We are not modifying the component itself. In the original example, the component is removed from body by setting the body to empty array. The component itself does not get modified. After the body in second component is set to empty, the component gets destroyed. Its isValid state becomes false and that is why it disappears from everywhere. So the question is how to prevent it being destroyed. – Artur Jan 22 '17 at 18:51

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.