この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

Lightning コンポーネント開発者ガイド

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

aura:renderIf

aura:renderIf は、isTrue 属性が true と評価されたときにタグ内のコンテンツを表示します。

aura:renderIf は、true および false の両方の状態に対してコンポーネントを表示する場合にのみ使用を検討してください。最初に表示されないコンポーネントをインスタンス化するには、サーバに往復処理を要求することになります。それ以外の場合は、aura:if を使用して、指定された式が true と評価されたときにコンテンツを表示します。

属性名 型 説明
else Component[] isTrue が false と評価されたときに表示するマークアップ。aura:set タグを使用して、この属性を設定します。
isTrue String 必須。コンテンツを表示するかどうかを判断する式。true と評価されると、コンテンツが表示されます。

式を渡す

評価するコンポーネントに式を渡す場合は、aura:renderIf を使用します。たとえば、aura:renderIf タグを含むコンポーネントを参照するコンテナコンポーネントがあるとします。

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>

コンテナコンポーネントには、native 属性の値を切り替えるボタンがあります。

containerController.js

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

このボタンを押すと、式 native={!v.native || v.native}" が aura:renderIf タグに渡され、正しく再評価されます。