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

2. campingList.cmp

    

    
        

        	Quantity: 
        
        

            Price: 
        
        

            Packed: {!v.item.Packed__c}
        
    

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

    
        
            
        
        
            

                
Campaign Items
                
My Campaign Items
            
        
    

5. campingListItem.cmp

    
    
    
	
    
    
    
    
    
        
            
            

                
                

                    

                        Add Campaign Item
                    
                    
                    
                    
          
                         
                        
                        
                        
                        
                    
                    
                    
                
                
            
            
        
    
    
    
    

    
        
        
        

            

                
                	
                
            
        
    
    

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

2. Item List预览：

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