この文章は 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

マークアップの動的な表示または非表示

ボタンが押されたときにマークアップを表示または非表示にすることができます。

コンポーネントのソース

1swfobject.registerObject("clippy.codeblock-0", "9");<aura:component>
2    <aura:attribute name="visible" type="Boolean" default="false" />
3    
4    <br/>
5    
6    <p>Click the button to see toggling at its best!</p>
7    
8    <br/>
9
10    <aura:renderIf isTrue="{!v.visible}">
11        <p>Now, you see me!</p>
12    </aura:renderIf>
13
14    <ui:button label="Toggle Markup Visibility" press="{!c.showHide}"/>
15        
16</aura:component>
17

クライアント側コントローラのソース

1swfobject.registerObject("clippy.codeblock-1", "9");({
2    showHide: function(cmp) {
3        var isVisible = cmp.get("v.visible"); 
4        // toggle the visible value
5        cmp.set("v.visible", !isVisible);
6    }
7})
8

コンポーネントのソースを見て、どのように機能するのかを確認しましょう。マークアップを表示するかどうかを制御する visible という属性を追加しました。デフォルトでは false に設定されているため、マークアップは表示されません。実際には、マークアップのために作成される DOM 要素はありません。

visible 属性が true と評価された場合のみ、aura:renderIf タグによって、マークアップがボディに表示されます。

ui:button により、クライアント側のコントローラで showHide アクションがトリガされます。このアクションでは、単純に visible 属性の値を切り替えます。