[SalesForce] component.get is giving null on parents component’s controller

I am trying to pass a string literal to parent component as attribute.

Child Component code:

 <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
   <h1>{!v.assessment.N2__c}</h1>
    <div class="slds-form-element__control">
      <c:PicklistSelect objectName="DEL_Assessment__c" fieldName="N2__c" value="{!v.assessment.N2__c}"/>
    </div>
  </div>

Defining attribute on Parent component PicklistSelect :

<aura:attribute name="value" type="String"/>

Rendering code on parent component :

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<h1>'Passed literal value '+{!v.value}</h1>

Till here it is working well and on the layout of both parent and child the {!v.value} is printing.

But when i try to retriew the same in parent component PicklistSelect's controllers doInit function it is giving null

var value=component.get('v.value');
alert(value);

This alert is giving null, am i missing something while passing or initializing the attribute?

But when i pass a hard-coded value as below – in this case on parent controller the popup is giving the defined value

      <c:PicklistSelect objectName="DEL_Assessment__c" fieldName="N2__c" value="Hello"/>

Best Answer

First of all, using attribute name as value is not recommended. The reason for not getting the expected value in the alert is that the method named doInit is fired much before the value is passed to the component. For getting the value, you can use another handler as follows, Suppose your attribute name is myvalue,

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

So when the attribute value is changed, it can be captured in the method.

Related Solutions

[SalesForce] Data binding for different attribute types in parent & child components under locker service

I think that after spending few hours I found the answer for the above. Still not sure if it's a bug or a feature of the framework, but definately it has something to do with how secure objects are constructed.

You need to make sure all possible properties for the object are defined (even if null) when you call component.set("v.obj", obj); for the first time.

Here is example component & controller, with one simple attribute (initialized on init), and two buttons calling log & set functions of controller:

<aura:component >
    <aura:attribute name="testAtr" type="Object" access="global"/>
    <aura:handler name="init" value="{!this}" action="{!c.initialize}"/>
    <p><a onclick="{!c.logAtr}">Console Log Parent</a></p>
    <p><a onclick="{!c.setSth}">Set Something</a></p>
</aura:component>

({
    initialize : function(component, event, helper) {
        var obj = {};
        obj.data = 'test';
        // obj.someNewProperty = null;
        component.set("v.testAtr", obj);
    },
    logAtr : function(component, event, helper) {
        console.log(component.get("v.testAtr.someNewProperty"));
    },
    setSth : function(component, event, helper) {
        var testAtr = component.get("v.testAtr");
        testAtr.someNewProperty = 'New Property';
        component.set("v.testAtr", testAtr);
    },
})

If the line obj.someNewProperty = null; in initialize method is commented out, console.log returns undefined even if you call setSth method that actually sets value of obj.someNewProperty.

If the line obj.someNewProperty = null; in initialize method is present, console.log returns null before calling setSth method and 'New Property' after calling it.

EDIT: But this has some drawbacks. Let's imagine we have a simple form for sObject. You need to initialize object with all the possible properties. If you don't do this - no values will be kept. If these lines: acc.Name = null; acc.Phone = null; acc.Account_Status__c = null; are commented as in below example - value put in the input text is not bind to testAcc attribute.

<aura:component >
    <aura:attribute name="testAcc" type="Account" access="global"/>
    <aura:handler name="init" value="{!this}" action="{!c.initialize}"/>

    <p>Name: <ui:inputText value="{!v.testAcc.Name}"/></p>
    <p>Phone: <ui:inputText value="{!v.testAcc.Phone}"/></p>
    <p>Status: <ui:inputText value="{!v.testAcc.Account_Status__c}"/></p>
    <p><a onclick="{!c.logAcc}">Console Log Acc</a></p>
</aura:component>

({
    initialize : function(component, event, helper) {
        var acc = {};
        // acc.Name = null;
        // acc.Phone = null;
        // acc.Account_Status__c = null;
        component.set("v.testAcc", acc);
    },

    logAcc : function(component) {
        console.log(component.get("v.testAcc"));
    }
})

[SalesForce] Lightning change handler – value based on parent object

Are you trying to avoid the changes if happening from parent component? Means don't want to fire the change event if value is changed in parent component If so then can you try this expression:

<c:testCmp value="{#v.valueObj.message}"/>

Basically using "#" in attribute binding avoid the creation of standard framework change event handlers. So if the value is getting updated at parent level it will not affect the child attribute.

Best Answer

Related Solutions

[SalesForce] Data binding for different attribute types in parent & child components under locker service

[SalesForce] Lightning change handler – value based on parent object

Related Topic