Lighting コンポネント campingList

バンドルはフォルダのようなものです コンポーネントの属性は、オブジェクトのインスタンス変数のようなものです

「v.」の部分は何を表しているでしょうか? v は値プロバイダと呼ばれるものです

値プロバイダは、関連データのグループ化とカプセル化を行い、そのデータにアクセスする方法です

コンポネントのcampingListソース公開

campingHeader.cmp

<aura:component >
  <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem >
            <lightning:icon iconName="action:goal" alternativeText="My Camping"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Camping</h1>
                <h2 class="slds-text-heading--medium">My Camping</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

campingHeader.css

.THIS {
}
h1.THIS {
    font-size: 18px;
}

campingListItem.cmp

<aura:component >
    <aura:attribute name='item' type='Camping_Item__c' required='true' default="{'sobjectType': 'Camping_Item__c', 'Name':'Torch', 'Price__c': 10, 'Quantity__c': 1, 'Packed__c': false}"></aura:attribute>

    
    <p> Name: <ui:outputText value="{!v.item.Name}"/></p> 
    <p> Price:<lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/></p>   
    <p>Qualtity: <lightning:formattedNumber value="{!v.item.Quantity__c}"/>  </p>    
    <p> Packed:<ui:outputCheckbox value="{!v.item.Packed__c}"/> </p>
    <lightning:input type="toggle"
                         name="Packed"
                         label="Packed:"
                         checked="{!v.item.Packed__c}"
                         />
</aura:component>

campingHeader.Controller

({
    clickCreateItem: function(component, event, helper) {
        component.set("v.newItem",{'sobjectType':'Camping_Item__c',
                'Name': '',
                'Quantity__c': 0,
                'Price__c': 0,
                'Packed__c': false});
    }
})

campingList

<aura:component >
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    <aura:attribute name="newItem" type="Camping_Item__c" default="{'Name':'',
                                                                   'Quantity__c':0,
                                                                   'Price__c':0,
                                                                   'Packed__c':false,
                                                                   'sobjectType':'Camping_Item__c'}"/>
    
    <!-- NEW Campaing FORM -->
    <div class="slds-col slds-col--padded slds-p-top--large">
        
        
        <c:campingHeader/>
        
        <div aria-labelledby="newCampaingForm">
            
            <!-- BOXED AREA -->
            <fieldset class="slds-box slds-theme--default slds-container--small">
                
                <legend id="newCampaingForm" class="slds-text-heading--small 
                                                   slds-p-vertical--medium">
                    Add Expense
                </legend>
                
                <!-- CREATE NEW Campaing FORM -->
                <form class="slds-form--stacked">
                    
                    <!-- For Name Field -->
        <lightning:input aura:id="expenseform" label="Camping Name"
                         name="expensename"
                         value="{!v.newItem.Name}"
                         required="true"/>
        <!-- For Quantity Field -->
        <lightning:input type="number" aura:id="campingform" label="Quantity"
                         name="expenseamount"
                         min="1"
                         value="{!v.newItem.Quantity__c}"
                         messageWhenRangeUnderflow="Enter minimum 1 Quantity"/>
         <!-- For Price Field -->
        <lightning:input aura:id="campingform" label="Price"
                         formatter="currency"
                         name="expenseclient"
                         value="{!v.newItem.Price__c}"
                          />
         <!-- For Check Box -->
        <lightning:input type="checkbox" aura:id="campingform" label="Packed"  
                         name="expreimbursed"
                         checked="{!v.newItem.Packed__c}"/>
        
        <lightning:button label="Create Camping" 
                          class="slds-m-top--medium"
                          variant="brand"
                          onclick="{!c.clickCreateItem}"/>
                </form>
                <!-- / CREATE NEW EXPENSE FORM -->
                
            </fieldset>
            <!-- / BOXED AREA -->
            
        </div>
        <!-- / CREATE NEW EXPENSE -->
    </div>
    
    <!-- ITERATIING ITEM LISTS -->
    <div class="slds-card slds-p-top--medium">
        
        <c:campingHeader/>
        
        <section class="slds-card__body">
            <div id="list" class="row">
                <aura:iteration items="{!v.items}" var="item">
                    <c:campingListItem item="{!item}"/>
                </aura:iteration>
            </div>
        </section>
    </div>    
    <!-- / ITERATIING ITEM LISTS -->
</aura:component>

campingApplication

<aura:application extends="force:slds">
    <c:campingList/>
</aura:application>

結果