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

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18  <aura:attribute name="expense" type="Expense__c"/>
19
20  <!-- Color the item blue if the expense is reimbursed -->
21   <div class="{!v.expense.Reimbursed__c == true 
22                   ? 'alert alert-success' : 'alert alert-warning'}">
23      <a aura:id="expense" href="{!'/' + v.expense.Id}">
24          <h3>{!v.expense.Name}</h3>
25      </a>
26      <p>Amount: 
27          <ui:outputNumber value="{!v.expense.Amount__c}" format=".00"/>
28      </p>
29      <p>Client: 
30          <ui:outputText value="{!v.expense.Client__c}"/>
31      </p>
32      <p>Date: 
33          <ui:outputDateTime value="{!v.expense.Date__c}" />
34      </p>
35      <p>Reimbursed? 
36          <ui:inputCheckbox value="{!v.expense.Reimbursed__c}" click="{!c.update}"/>
37      </p>
38  </div>
39</aura:component>

1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:iteration items="{!v.expenses}" var="expense">
18    <p>{!expense.Name}, {!expense.Client__c}, {!expense.Amount__c}, {!expense.Date__c}, {!expense.Reimbursed__c}</p>
19</aura:iteration>

1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:iteration items="{!v.expenses}" var="expense">
18<!--If you’re using a namespace, use myNamespace:expenseList instead-->
19    <c:expenseList expense="{!expense}"/>
20</aura:iteration>
21