1

Did anyone ever use cmp.clearReference("v.attribute")? The documentation says it should be called before resetting attributes with component.set(), what sounds kind of useless to me. There are no use cases documented online, so it seems not to be a best practice or something right?

clearReference (String key)

Clears a live reference for the value indicated using property syntax. For example, if you use aura:set to set a value and later want to reset the value using component.set(), clear the reference before resetting the value.

Parameters

key : String 

The data key for which to clear the reference. For example, "v.attributeName".
  • I've never even heard of clearReference before. My first guess would be if a child component's attribute was passed with "{!" (bound), using clearReference on it might break that binding so that any changes are not propagated? That's just a guess, though. – Florissant53 Dec 7 '17 at 20:11
3

I used this for the case when I needed to break the connection of the parent with the child. When the parent received a response from the server and passed it to the child, the connection is broken. This allows data to be used independently of one another. Changes in the data in the child do not affect the data of the parent and vice versa.

You can test it:

Pressing the buttons will change the data independently. If you remove the handler, the connection will be two-way. I hope this will be useful for you.

<aura:handler name="change" value="{!v.childAttr}" action="{!c.onChildAttrChange}"/>

APEX:

public class TEST_exprController {

    @AuraEnabled
    public static String[] getDataMockData() {
        String[] stringList = new String[]{};

        for (Integer i=1; i<=10; i++) {
            stringList.add('Name ' + i);
        }

        return stringList;
    }
}

APP:

<!--c:TEST_exprApp-->
<aura:application extends="force:slds">
    <lightning:layout horizontalAlign="center" multipleRows="true">
        <c:TEST_parentExpr />
    </lightning:layout>
</aura:application>

PARENT CMP

<!--c:TEST_parentExpr-->
<aura:component controller="TEST_exprController">
    <!-- ATTRIBUTES -->
    <aura:attribute type="List" name="parentAttr" default="[]" />

    <!-- HANDLERS -->
    <aura:handler name="init" value="{!this}" action="{!c.getDataFromApex}"/>

    <!-- MARKUP -->
    <lightning:layoutItem size="6">
        <!-- BUTTON -->
        <lightning:layoutItem class="slds-align_absolute-center" size="12" padding="around-medium">
            <lightning:button label="Update parentAttr" onclick="{!c.updateParentAttrListName}"/>
        </lightning:layoutItem>

        <!-- LIST -->
        <aura:iteration items="{!v.parentAttr}" var="item">
            <lightning:layoutItem class="slds-align_absolute-center" size="12">
                {!item}
            </lightning:layoutItem>
        </aura:iteration>
    </lightning:layoutItem>

    <lightning:layoutItem size="6">
        <c:TEST_childExpr childAttr="{!v.parentAttr}" />
    </lightning:layoutItem>
</aura:component>

PARENT CONTROLLER

getDataFromApex: function(cmp) {
        const action = cmp.get('c.getDataMockData');

        action.setCallback(this, (response) => {
            if (response.getState() === "SUCCESS") {
                //set result
                cmp.set('v.parentAttr', response.getReturnValue());
            }
        });

        $A.enqueueAction(action);
    },

    updateParentAttrListName: function(cmp) {
        const parentAttr = cmp.get('v.parentAttr');
        parentAttr[0] = 'PARENT NAME';

        cmp.set('v.parentAttr', parentAttr);
    }

CHILD CMP

<!--c:TEST_childExpr-->
<aura:component>
    <!-- ATTRIBUTES -->
    <aura:attribute type="List" name="childAttr" />

    <!-- HANDLERS -->
    <aura:handler name="change" value="{!v.childAttr}" action="{!c.onChildAttrChange}"/>

    <!-- MARKUP -->
    <lightning:layoutItem size="6">
        <!-- BUTTON -->
        <lightning:layoutItem class="slds-align_absolute-center" size="12" padding="around-medium">
            <lightning:button label="Update childAttr" onclick="{!c.updateChildAttrListName}"/>
        </lightning:layoutItem>

        <!-- LIST -->
        <aura:iteration items="{!v.childAttr}" var="item">
            <lightning:layoutItem class="slds-align_absolute-center" size="12">
                    {!item}
            </lightning:layoutItem>
        </aura:iteration>
    </lightning:layoutItem>
</aura:component>

CHILD CONTROLLER

updateChildAttrListName: function(cmp) {
        const childAttr = cmp.get('v.childAttr');
        childAttr[0] = 'CHILD NAME';

        cmp.set('v.childAttr', childAttr);
    },

    onChildAttrChange: function(cmp, event) {
        const oldValue = event.getParams().oldValue;

        if ( $A.util.isEmpty(oldValue) ) {
            const newValue = event.getParams().value;

            //destroy 'Data Binding'
            cmp.clearReference('v.childAttr');

            cmp.set('v.childAttr', newValue);
        }
    },
  • If you get you right, you needed to break the reference to the parent. Did you try to pass it in unbound using #? doesn't that solve the problem <c:TEST_childExpr childAttr="{#v.parentAttr}" /> – Basti Nov 12 '18 at 10:27
  • This will not solve the problem, because when a response comes from the server, the result will not be passed to the child. Because we used childAttr="{#v.parentAttr}" - handlers are not created and, accordingly, the attribute will not be updated after the response. – LambuR Nov 13 '18 at 9:32
  • Okay, I see the difference here, nice, thanks for your answer :) ps. If you only need it from apex during init, you could surround the block with aura:if not(empty(v.parentAttr)) and use the unbound # then. I guess there is often multiple ways... – Basti Nov 13 '18 at 14:23
  • Yes, of course, but in this case, changing the data in the child, they will change in the parent. In order to prevent this in my case, the reference is broken between the parent and the child. I was glad to help you) – LambuR Nov 13 '18 at 20:07

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.