Aura Components Basics on Trailhead —

【前言】：在完成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 fieldsinputCmp.showHelpMessageIfInvalid();return validSoFar && inputCmp.get('v.validity').valid;}, true);// If we pass error checking, do some real workif(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 formcomponent.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里面，否则验证无法通过；

Aura Components Basics on Trailhead —— Input Data Using Forms相关推荐

Clipping input data to the valid range for imshow with RGB data ([0..1] for floats or [0..255] for i
keras imshow显示图片显示不出来,报错 Clipping input data to the valid range for imshow with RGB data ([0..1] fo ...
python Clipping input data to the valid range for imshow with RGB data解决方法
文章目录遇到的问题全部代码参考遇到的问题第一点,遇到的问题是 Clipping input data to the valid range for imshow with RGB data ...
使用MetaMask实现转账交易时附带Input Data数据
进入如下页面,点击View Assert in Explorer进入Etherscan网站,就可以看到本账户先前所有的交易信息. 字段分析 Txn Hash 是交易的Hash Method:交易的类型 ...
《How to Reshape Input Data for Long Short-Term Memory Networks in Keras》学习笔记
跟随大神Jason Brownlee, Ph.D学习Deep Learning.<How to Reshape Input Data for Long Short-Term Memory Net ...
Failed to set attribute: Invalid input data or parameter 解决
arm64 swconfig 配置vlan 失败问题 Failed to set attribute: Invalid input data or parameter 解决内核版本:linux-5. ...
ABAP WB01 BDC ”No batch input data for screen “ ”没有屏幕的批输入数据“
ABAP WB01 BDC "No batch input data for screen & &" "没有屏幕 & & 的批输入数据&q ...
sqoop导出hive分区表字段到mysql报错：Can‘t parse input data: ‘0‘
目的: 为了保留ads(应用层)的历史数据,所以把ads层的表建成了带分区的表. 带来的问题: sqoop导出不带分区字段的列,可以正常导出: sqoop导出带分区字段的列,就报错如下: Can't ...
解决：Clipping input data to the valid range for imshow with RGB data
Clipping input data to the valid range for imshow with RGB data 今天在提取彩色图像RGB通道值合成单通道图像时,出现问题: Clippi ...
Clipping input data to the valid range for imshow with RGB data ([0..1] for floats or [0..255]解决方法
Clipping input data to the valid range for imshow with RGB data ([0..1] for floats or [0..255] ❓报错原因 ...

Aura Components Basics on Trailhead —— Input Data Using Forms

Aura Components Basics on Trailhead —— Input Data Using Forms相关推荐

最新文章

热门文章