Lightning コンポーネント開発者ガイド
jステップ 4: ネストされたコンポーネントを作成する
コンポーネントの拡大に伴い、粒度とカプセル化を保持するために分割する場合があります。このステップでは、繰り返しのデータを含みその属性が親コンポーネントに渡されるコンポーネントの作成について説明します。また、コンポーネントの初期化時にデータを読み込むため、クライアント側のコントローラアクションも追加します。
- をクリックします。
- [New Lightning Bundle (新規 Lightning バンドル)] ポップアップウィンドウで、「expenseList」と入力します。これにより、expenseList.cmp という新しいコンポーネントが作成されます。
-
expenseList.cmp で、次のコードを入力します。
1<aura:component> 2 <aura:attribute name="expense" type="Expense__c"/> 3 4 <!-- Color the item blue if the expense is reimbursed --> 5 6 <!-- If you registered a namespace, 7 use v.expense.myNamespace__Reimbursed__c instead. --> 8 <div class="{!v.expense.Reimbursed__c == true 9 ? 'alert alert-success' : 'alert alert-warning'}"> 10 <a aura:id="expense" href="{!'/' + v.expense.Id}"> 11 <h3>{!v.expense.Name}</h3> 12 </a> 13 14 <!-- If you registered a namespace, 15 replace the following values with 16 v.expense.myNamespace__fieldName__c instead --> 17 <p>Amount: 18 <ui:outputNumber value="{!v.expense.Amount__c}" format=".00"/> 19 </p> 20 <p>Client: 21 <ui:outputText value="{!v.expense.Client__c}"/> 22 </p> 23 <p>Date: 24 <ui:outputDateTime value="{!v.expense.Date__c}" /> 25 </p> 26 <p>Reimbursed? 27 <ui:inputCheckbox value="{!v.expense.Reimbursed__c}" click="{!c.update}"/> 28 </p> 29 </div> 30</aura:component>ここでは、{!expense.Amount__c} ではなく、{!v.expense.Amount__c} を使用しています。この式は、expense オブジェクトおよびその amount 値にアクセスします。
また、href="{!'/' + v.expense.Id}" は、経費 ID を使用して、各経費レコードの詳細ページへのリンクを設定します。
-
form.cmp で、ネストされた新しいコンポーネント expenseList を使用するように aura:iteration タグを更新します。既存の aura:iteration タグを見つけます。
1<aura:iteration items="{!v.expenses}" var="expense"> 2 <p>{!expense.Name}, {!expense.Client__c}, {!expense.Amount__c}, {!expense.Date__c}, {!expense.Reimbursed__c}</p> 3</aura:iteration>そのタグを、expenseList コンポーネントを使用する aura:iteration タグに置き換えます。
1<aura:iteration items="{!v.expenses}" var="expense"> 2<!--If you’re using a namespace, use myNamespace:expenseList instead--> 3 <c:expenseList expense="{!expense}"/> 4</aura:iteration>経費の詳細の表示を処理する expenseList コンポーネントに各 expense レコードを単に渡す場合と、マークアップが似ていることがわかります。
- 変更を保存し、ブラウザを再読み込みします。
ネストされたコンポーネントを作成したので、その属性を親コンポーネントに渡します。次に、ユーザ入力の処理方法と、経費オブジェクトの更新方法ついて説明します。
中級編
コンポーネントを作成すると、そのコンポーネントの定義を提供することになります。コンポーネントを別のコンポーネントに挿入する場合は、そのコンポーネントへの参照を作成します。つまり、同じコンポーネントの異なる属性を持つ複数のインスタンスを追加できるということです。コンポーネントの属性についての詳細は、「コンポーネントのコンポジション」を参照してください。