Aura Components Basics on Trailhead —— Input Data Using Forms

【前言】：在完成Aura Components Basics时，遇到下面问题：The campingList component isn't iterating the array of 'items' and creating 'campingListItem' components. 经反复尝试，最终通过了这个挑战。

【代码】：
1. campingApp.app

<aura:application extends="force:slds">
        <!-- This component is the real "app" -->
    	<c:campingList/>
</aura:application>

2. campingList.cmp

<aura:component>
    <aura:attribute name="item" type="Camping_Item__c"/>

    <lightning:card title="{!v.item.Name}" iconName="standard:scan_card">
        <p class="slds-text-heading--medium slds-p-horizontal--small">
        	Quantity: <lightning:formattedNumber value="{!v.item.Quantity__c}" style="decimal"/>
        </p>
        <p class="slds-p-horizontal--small">
            Price: <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
        </p>
        <p class="slds-p-horizontal--small">
            Packed: {!v.item.Packed__c}
        </p>
    </lightning:card>
</aura:component>

3. campingListController.js

({
    clickCreateItem: function(component, event, helper) {
        var validCamping = component.find('campingform').reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);
        // If we pass error checking, do some real work
        if(validCamping){
            var newItem = component.get("v.newItem");
            var theItems = component.get("v.items");
            
            console.log("Campaign Item before 'create': " + JSON.stringify(theItems));
            theItems.push(newItem);
            component.set("v.items", theItems);
            console.log("Campaign Item after 'create': " + JSON.stringify(theItems));
            
            // reset form
            component.set("v.newItem",{'sobjectType':'Camping_Item__c',
                                   'Name': '',
                                   'Quantity__c': 0,
                                   'Price__c': 0,
                                   'Packed__c': false});
        }
    }
})

4. campingHeader.cmp

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

5. campingListItem.cmp

<aura:component>
    <aura:attribute name="newItem" type="Camping_Item__c"
                    default="{ 'sobjectType': 'Camping_Item__c',
                             'Name': '',
                             'Quantity__c': 0,
                             'Price__c': 0,
                             'Packed__c': false }"/>
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    
	<!-- PAGE HEADER -->
    <c:campingHeader/>
    <!-- / PAGE HEADER -->
    
    <!-- NEW EXPENSE FORM -->
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">
            <!-- CREATE NEW EXPENSE -->
            <div aria-labelledby="newexpenseform">
                <!-- BOXED AREA -->
                <fieldset class="slds-box slds-theme--default slds-container--small">
                    <legend id="newexpenseform" class="slds-text-heading--small 
                                                       slds-p-vertical--medium">
                        Add Campaign Item
                    </legend>
                    
                    <!-- CREATE NEW EXPENSE FORM -->
                    <form class="slds-form--stacked">          
                        <lightning:input aura:id="campingform" label="Name"
                                         name="campitemname"
                                         value="{!v.newItem.Name}"
                                         required="true"/> 
                        <lightning:input type="number" aura:id="campingform" label="Quantity" 
                                         name="campitemquantity"
                                         value="{!v.newItem.Quantity__c}"
                                         min="1"
                                         messageWhenRangeUnderflow="Enter an quantity that's at least 1."/>
                        <lightning:input type="number" aura:id="campingform" label="Price"
                                         name="campitemprice"
                                         min="1"
                                         formatter="currency"
                                         step="1"
                                         value="{!v.newItem.Price__c}"
                                         messageWhenRangeUnderflow="Enter an price that's at least $1."/>
                        <lightning:input type="checkbox" aura:id="campingform" label="Packed?"
                                         name="expreimbursed"
                                         checked="{!v.newItem.Packed__c}"/>
                        <lightning:button label="Create Campaign Item" 
                                          class="slds-m-top--medium"
                                          variant="brand"
                                          onclick="{!c.clickCreateItem}"/>
                    </form>
                    <!-- / CREATE NEW EXPENSE FORM -->
                    
                </fieldset>
                <!-- / BOXED AREA -->
            </div>
            <!-- / CREATE NEW EXPENSE -->
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / NEW EXPENSE FORM -->
    <!-- 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>

【效果预览】：
1. 验证规则：

2. Item List预览：

【注意事项】：
1. Demo环境不能含命名空间；
2. campingListController.js里面设置items和重置表单不能放在campingListHelper.js里面，否则验证无法通过；