I have a list of records that I iterate over.
<aura:iteration items="{!v.items}" var=item">
<aura:if isTrue="{!item.field__c == v.completed}">
<c:item item="{!item}"/>
</aura:if>
</aura:iteration>
I have multiple conditions to display the data in different ways
Personal Items
-
Display current == true, personal == true of the ownerId == currentUserId (current personal items).
-
Display current == false, personal == true of the of the ownerId == currentUserId (completed personal items).
Shared records among the org
-
Display current == true, personal == false (current company items).
-
Display current == false, personal == false (completed company items).
I'm using a mix of conditional database calls, conditional css, and aura:if's. It's turning into a big mess making it all work together.
Are conditional database calls, conditional css, and aura:if's the only ways to control which records are shown?
If I embed multiple aura:if's it causes rendering errors with my lightning events.
Is there a best practice from Salesforce how to achieve what I'm trying to do?
Best Answer
Salesforce actually recommend using CSS if possible:
Reference here.
To use CSS, you can put something like this in your CSS file:
And add the hide class where necessary.
In the
item
component, you can then map itemClass to whatever class you need.ie: