aura:renderIf

Only consider using aura:renderIf if you expect to show the components for both the true and false states, and it would require a server round trip to instantiate the components that aren't initially rendered. Otherwise, use aura:if to render content if a provided expression evaluates to true.

Passing in an Expression

Use aura:renderIf if you are passing an expression into a component to be evaluated. For example, you have a container component that references a component, which has a aura:renderIf tag.

container.cmp

1swfobject.registerObject("clippy.codeblock-0", "9");<aura:attribute name="native" type="Boolean" default="true"/>
2<auradocs:myCmp value="0.5" native={!v.native || v.native}"/>
3<ui:button label="Toggle" press="{!c.toggleMe}"/>

myCmp.cmp

1swfobject.registerObject("clippy.codeblock-1", "9");<aura:attribute name="native" type="Boolean" default="true"/>
2<aura:attribute name="value" type="Decimal"/>
3
4<aura:renderIf isTrue="{!v.native}">
5  <meter value="{!v.value}">{!(v.value * 100) + '%'}</meter>
6  <aura:set attribute="else">
7    <!--your meter here-->
8  </aura:set>
9</aura:renderIf>

The container component has a button which toggles the native attribute value.

containerController.js

1swfobject.registerObject("clippy.codeblock-2", "9");({
2    toggleMe: function(cmp) {
3        cmp.set('v.native', !cmp.get('v.native'));
4    }
5})

When the button is pressed, the expression native={!v.native || v.native}" is passed into the aura:renderIf tag and reevaluated correctly.