Hello everyone,

I've been trying to wrap my head around $A.getCallback but the only documentation I could find was not very helpful.
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_mod_ext_js.htm says:

Use $A.getCallback() to wrap any code that modifies a component outside the normal rerendering lifecycle, such as in a setTimeout() call. The $A.getCallback() call ensures that the framework rerenders the modified component and processes any enqueued actions.

So I made a simple component that displays "Hello World" and a button that fakes an async call using promises and setTimeout. Once the promise resolves I update the attribute of the component and the text changed. I was expecting the component not to be rerendered unless I used $A.getCallback(), but it worked fine without it because component is in scope because of the closure created when helper.handleClick() runs. Here is the code:

Markup
 

<aura:component >
	<aura:attribute name="msg" type="String" default="Hello World"/>
	<c:testCmp2 message="{!v.msg}" />
	<lightning:button variant="brand" label="Submit" onclick="{! c.handleClick }" />
</aura:component>

Controller

({
	handleClick : function(component, event, helper) {
		helper.handleClick(component);
	}
})

Helper
​​

({
	handleClick : function(component) {
		this.testPromise()
			.then(function(text) {
				component.set('v.msg', text);
			});	
	},
	testPromise : function() {
		return new Promise(function(resolve, reject) {
			setTimeout(function() { 
				resolve('Message Changed') 
			}, 3000);
		});
	}
})

I'm basically trying to learn how things work by breaking them lol. Can anyone show me an example where some async task does not work when not using $A.getCallback() ?

Thanks in advance!

Hello,

I am currently going through the Lightning trailhead and I am building the expense app. When an expense is marked as reimbursed it's supposed to get a green background thanks to the .slds-theme--success class. However this style looks like it is being overridden by the .slds-card white background. Has anyone experienced this error? I could fix it by adding something like this to the component.
 

/*.slds-theme--success.THIS {
    background-color: rgb(4, 132, 75)!important;
}*/

But that honestly feels like cheating. Has anyone faced this issue. I've copied and pasted the code straight from Trailhead but it's not working as expected. Here is the component code and a screenshot illustrating the problem.

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="formatdate" type="Date"/>
    <aura:attribute name="expense" type="Expense__c"/>
 
 
    <lightning:card title="{!v.expense.Name}" iconName="standard:scan_card"
                    class="{!v.expense.Reimbursed__c ?
                           'slds-theme--success' : ''}">
        <aura:set attribute="footer">
            <p>Date: <lightning:formattedDateTime value="{!v.formatdate}"/></p>
            <p class="slds-text-title"><lightning:relativeDateTime value="{!v.formatdate}"/></p>
        </aura:set>
        <p class="slds-text-heading--medium slds-p-horizontal--small">
           Amount: <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
        </p>
        <p class="slds-p-horizontal--small">
            Client: {!v.expense.Client__c}
        </p>
        <p>
            <lightning:input type="toggle"
                             label="Reimbursed?"
                             name="reimbursed"
                             class="slds-p-around--small"
                             checked="{!v.expense.Reimbursed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"
                             onchange="{!c.clickReimbursed}"/>
        </p>
    </lightning:card>
</aura:component>

Thanks in advance!

Hello,

I am currently going through the Lightning trailhead and I am building the expense app. When an expense is marked as reimbursed it's supposed to get a green background thanks to the .slds-theme--success class. However this style looks like it is being overridden by the .slds-card white background. Has anyone experienced this error? I could fix it by adding something like this to the component.
 

/*.slds-theme--success.THIS {
    background-color: rgb(4, 132, 75)!important;
}*/

But that honestly feels like cheating. Has anyone faced this issue. I've copied and pasted the code straight from Trailhead but it's not working as expected. Here is the component code and a screenshot illustrating the problem.

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="formatdate" type="Date"/>
    <aura:attribute name="expense" type="Expense__c"/>
 
 
    <lightning:card title="{!v.expense.Name}" iconName="standard:scan_card"
                    class="{!v.expense.Reimbursed__c ?
                           'slds-theme--success' : ''}">
        <aura:set attribute="footer">
            <p>Date: <lightning:formattedDateTime value="{!v.formatdate}"/></p>
            <p class="slds-text-title"><lightning:relativeDateTime value="{!v.formatdate}"/></p>
        </aura:set>
        <p class="slds-text-heading--medium slds-p-horizontal--small">
           Amount: <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
        </p>
        <p class="slds-p-horizontal--small">
            Client: {!v.expense.Client__c}
        </p>
        <p>
            <lightning:input type="toggle"
                             label="Reimbursed?"
                             name="reimbursed"
                             class="slds-p-around--small"
                             checked="{!v.expense.Reimbursed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"
                             onchange="{!c.clickReimbursed}"/>
        </p>
    </lightning:card>
</aura:component>

Thanks in advance!