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

ステップ 4: ネストされたコンポーネントを作成する

コンポーネントの拡大に伴い、粒度とカプセル化を保持するために分割する場合があります。このステップでは、繰り返しのデータを含みその属性が親コンポーネントに渡されるコンポーネントの作成について説明します。また、コンポーネントの初期化時にデータを読み込むため、クライアント側のコントローラアクションも追加します。

次のフローチャートに、新しい経費を作成するときの、アプリケーションでのデータフローを示します。コンポーネント form.cmp で [送信] ボタンをクリックするとデータが取得され、JavaScript コードで処理され、サーバ側のコントローラに送信してレコードとして保存されます。レコードのデータは、このステップで作成するネストされたコンポーネントに表示されます。フォームによりデータが取得され、クライアント側およびサーバ側のコントローラで処理される。

  1. [ファイル] | [新規] | [Lightning コンポーネント] をクリックします。
  2. [New Lightning Bundle (新規 Lightning バンドル)] ポップアップウィンドウで、「expenseList」と入力します。これにより、expenseList.cmp という新しいコンポーネントが作成されます。
  3. expenseList.cmp で、次のコードを入力します。
    namespace を、登録済みの名前空間と置き換えます。
    1swfobject.registerObject("clippy.codeblock-0", "9");<aura:component>
2  <aura:attribute name="expense" type="namespace.Expense__c"/>
3
4  <!-- Color the item blue if the expense is reimbursed -->
5  <div class="{!v.expense.namespace__Reimbursed__c == true 
6                   ? 'listRecord recordLayout blue' : 'listRecord recordLayout white'}">
7    <a aura:id="expense" href="{!'/' + v.expense.Id}">
8      <div class="itemTitle">{!v.expense.Name}</div>
9    </a>
10      <div class="recordItem">Amount: 
11          <ui:outputNumber 
12           value="{!v.expense.namespace__Amount__c}" format=".00"/>
13      </div>
14      <div class="recordItem">Client: 
15          <ui:outputText 
16           value="{!v.expense.namespace__Client__c}"/>
17      </div>
18      <div class="recordItem">Date: 
19          <ui:outputDateTime
20           value="{!v.expense.namespace__Date__c}" />
21      </div>
22      <div class="recordItem">Reimbursed? 
23          <ui:inputCheckbox 
24           value="{!v.expense.namespace__Reimbursed__c}" click="{!c.update}"/>
25      </div>
26  </div>
27</aura:component>

    ここでは、{!expense.namespace__Amount__c} ではなく、{!v.expense.namespace__Amount__c} を使用しています。この式は、expense オブジェクトおよびその amount 値にアクセスします。名前空間でプレフィックスを付ける必要があるのは、カスタム項目のみです。expense の型は Expense__c です。非プリミティブ型には、myNamespace.myApexClass の形式を使用します。

    また、href="{!'/' + v.expense.Id}" は、経費 ID を使用して、各経費レコードの詳細ページへのリンクを設定します。

  4. サイドバーで [STYLE] をクリックし、次の CSS ルールセットを入力します。 
    1swfobject.registerObject("clippy.codeblock-1", "9");.THIS.recordLayout {
2    list-style: none;
3    padding: 14px;
4    margin: 10px;
5    border-bottom:1px solid #cfd4d9;
6}
7
8.THIS.listRecord {
9    margin: 14px;
10    border-radius: 5px;
11    border: 1px solid #cfd4d9;
12    position: relative;
13}
14
15.THIS .uiOutputText {
16    line-height: 1.1em;
17}
18
19.THIS .itemTitle {
20    font-size: 15px;
21    padding-bottom: 3px; 
22    overflow: hidden;
23    text-overflow: ellipsis;
24    white-space: nowrap;
25}
26
27.THIS .recordItem {
28    text-overflow: ellipsis;
29    white-space: nowrap;
30}
31
32.THIS a:hover {
33    text-decoration: none;
34    background-color: #235636;
35}
  5. form.cmp で、ネストされた新しいコンポーネント expenseList を使用するように aura:iteration タグを更新します。既存の aura:iteration タグを見つけます。 
    1swfobject.registerObject("clippy.codeblock-2", "9");    <aura:iteration items="{!v.expenses}" var="expense">
2        <p>{!expense.Name}, {!expense.namespace__Client__c}, {!expense.namespace__Amount__c}, {!expense.namespace__Date__c}, {!expense.namespace__Reimbursed__c}</p>
3    </aura:iteration>

    そのタグを、expenseList コンポーネントを使用する aura:iteration タグに置き換えます。namespace を、登録済みの名前空間と置き換えます。

    1swfobject.registerObject("clippy.codeblock-3", "9");    <aura:iteration items="{!v.expenses}" var="expense">
2      <namespace:expenseList expense="{!expense}"/>
3    </aura:iteration>
4

    経費の詳細の表示を処理する expenseList コンポーネントに各 expense レコードを単に渡す場合と、マークアップが似ていることがわかります。

  6. 変更を保存し、ブラウザを再読み込みします。
ネストされたコンポーネントを作成したので、その属性を親コンポーネントに渡します。次に、ユーザ入力の処理方法と、経費オブジェクトの更新方法ついて説明します。

中級編

コンポーネントを作成すると、そのコンポーネントの定義を提供することになります。コンポーネントを別のコンポーネントに挿入する場合は、そのコンポーネントへの参照を作成します。つまり、同じコンポーネントの異なる属性を持つ複数のインスタンスを追加できるということです。コンポーネントの属性についての詳細は、コンポーネントのコンポジションを参照してください。