Apex Code Development You need to sign in to do that
Don't have an account?
Mike Lee PCL Understanding Lightning Components - dynamic styling with ui:inputCheckbox
Hello,
I'm learning Lightning Components and am going through the Trailhead challenges. I'm stumped on how one piece of functionality is working.
Within a component I see the following two snippets:
<div class="{!v.expense.Reimbursed__c == true ?
'slds-theme--success': 'slds-theme--warning'}">
and
<p class="slds-truncate">Reimbursed?
<ui:inputCheckbox value="{!v.expense.Reimbursed__c}"
click="{!c.clickReimbursed}"/>
Originally I thought the click event within the ui:inputCheckbox was causing the styling to change. But when I deleted the click event code the dynamic styling was still in effect.
It looks like toggling the checkbox causes the styling of the contents under the <div> to change regardless of whether you have a click event or not under ui:inputCheckbox. How is this possible? If you're not looking for a click event how is the click event causing the style change?
Mike
I'm learning Lightning Components and am going through the Trailhead challenges. I'm stumped on how one piece of functionality is working.
Within a component I see the following two snippets:
<div class="{!v.expense.Reimbursed__c == true ?
'slds-theme--success': 'slds-theme--warning'}">
and
<p class="slds-truncate">Reimbursed?
<ui:inputCheckbox value="{!v.expense.Reimbursed__c}"
click="{!c.clickReimbursed}"/>
Originally I thought the click event within the ui:inputCheckbox was causing the styling to change. But when I deleted the click event code the dynamic styling was still in effect.
It looks like toggling the checkbox causes the styling of the contents under the <div> to change regardless of whether you have a click event or not under ui:inputCheckbox. How is this possible? If you're not looking for a click event how is the click event causing the style change?
Mike
yes, there is no roll of the click event on ui:inputchecbox field to change the style of div part, actually this ui:inputCheckbox field bind with the value="{!v.expense.Reimbursed__c}" , and Reimbursed__c is checkbox field of boolean type and
<div class="{!v.expense.Reimbursed__c == true ? 'slds-theme--success': 'slds-theme--warning'}">
this line also bind with the expense.Reimbursed__c so there is the two way binding in lightning components framework. and ui:inputCheckbox itself a event when you check the chekbox on UI it's set the value="{!v.expense.Reimbursed__c}" equeal to true and by the two way binding where the {!v.expense.Reimbursed__c} will be use there value automatic change to true/false.so that is why the change the color of div. on check/uncheck the inputCheckbox field
i hope it helps you , let me inform if it helps you and mark your question solved with best answer
thanks
http://sfdcmonkey.com
All Answers
yes, there is no roll of the click event on ui:inputchecbox field to change the style of div part, actually this ui:inputCheckbox field bind with the value="{!v.expense.Reimbursed__c}" , and Reimbursed__c is checkbox field of boolean type and
<div class="{!v.expense.Reimbursed__c == true ? 'slds-theme--success': 'slds-theme--warning'}">
this line also bind with the expense.Reimbursed__c so there is the two way binding in lightning components framework. and ui:inputCheckbox itself a event when you check the chekbox on UI it's set the value="{!v.expense.Reimbursed__c}" equeal to true and by the two way binding where the {!v.expense.Reimbursed__c} will be use there value automatic change to true/false.so that is why the change the color of div. on check/uncheck the inputCheckbox field
i hope it helps you , let me inform if it helps you and mark your question solved with best answer
thanks
http://sfdcmonkey.com
I wasn't famiiar with 2 way data bindings so I read up a bit on it and I can see why the styling changes are occuring now.
Something new to learn!
Mike