Lightning: Bug in Lightning framework when using aura:renderIf?

This is a known issue in the Framework.

We do plan to fix it, but there is a workaround and so it's not #1 on our plate over things like Performance.

Short Story

<aura:renderIf isTrue="{!v.testingArray.length > 0}">
        <SPAN>
        <aura:iteration items="{!v.testingArray}" var="opp">
            {!opp.name} <br/>
        </aura:iteration>
        </SPAN>
        <aura:set attribute="else">
            Array empty
        </aura:set>
    </aura:renderIf>

Long Story

The issue here is that some components like aura:renderIf and aura:iteration may not actually render anything. But you can come along later, change a condition and then they render.

To know where to render when it comes time to do so, we add a comment into the page. Then when we have some output, we replace the comment with the output.

But when you get a component like iteration which uses a comment, inside another component that uses a comment the framework gets confused. We replace the comment with the content of the iteration, but then renderIf loses its marker comment and you've hit the error.

Wrapping the iteration in a span causes iteration and renderIf not to share markers and things start working again.

Something we plan to fix, but the marker system is so complex we have to be careful not to break other things.

An alternative way around this bug is to use CSS.

 <div class="{!v.showTask ? 'card' : 'card hide'}">

where:

.hide {display:none} 

After spring 17 release <SPAN> solution will not work.

You will receive the following error in Spring 17 Release:

This page has an error. You might just need to refresh it. render threw an error in 'markup://aura:html' [The HTML tag 'SPAN' is not allowed.] Failing descriptor: {markup://aura:html}

Workaround : Use <Div> tag instead of <SPAN> tag as in the following example:

<aura:renderIf isTrue="{!v.testingArray.length > 0}">
    <DIV>
    <aura:iteration items="{!v.testingArray}" var="opp">
        {!opp.name} <br/>
    </aura:iteration>
    </DIV> 
    <aura:set attribute="else">
        Array empty
    </aura:set>
</aura:renderIf>