Salesforce學習之路（十三）Aura案例實戰分析

Aura相關知識整合：

Salesforce學習之路（十）Aura組件工做原理

Salesforce學習之路（十一）Aura組件屬性<aura:attribute />

Salesforce學習之路（十二）Aura組件表達式

1. Parent組件

parentAura.cmp

<!--Parent component-->
<!--controller類名：ParentAuraController-->
<!--force:appHostable: 該組件可做爲Lightning Experience的導航元素-->
<!--flexipage:availabeForAllPageTypes: 可在Lightning App Builder中使用，也作做爲Page使用-->
<!--access=global: 該組件在全部的Orgs中均可以被引用-->
<aura:component controller="ParentAuraController" 
                implements="force:appHostable,flexipage:availableForAllPageTypes"
                access="global">

    <aura:attribute name="displayMonths" type="String[]" />
    <aura:attribute name="selectedDisplayMonth" type="String" />
    <aura:attribute name="displayMonth" type="String" default="Last 6 Months"/>
    <aura:attribute name="read" type="Boolean" default="false" />

    <!--組件初始化操做-->
    <aura:handler name="init" value="{!this}" action="{!c.handleInit}" />
    
    <div class="white">      
        <lightning:layout multipleRows="true">
            <lightning:layoutItem size="4" padding="around-small">
                <!--下拉框選擇組件，selectedDisplayMonth爲下拉框選擇的值，displayMonths爲下拉框值列表-->
                <!--onchange: selectedDisplayMonth值改變時，調用controller.js中changeDisplayMonth函數-->
                <lightning:select name="displayMonthId" label="Select display months" aura:id="displayMonthId"
                    value="{!v.selectedDisplayMonth}" required="true" onchange="{!c.changeDisplayMonth}">
                    <aura:iteration items="{!v.displayMonths}" var="displayMonth">
                        <option text="{!displayMonth}"></option>
                    </aura:iteration>
                </lightning:select>
            </lightning:layoutItem>

            <lightning:layoutItem size="6" padding="around-small">
                <div class="slds-p-top--large">
                    <!--按鈕組件，label爲界面顯示值；onclick: 點擊按鈕時觸發controller.js中applyHandle函數-->
                    <!--display: true表示按鈕灰掉，沒法操做；false表示正常工做-->
                    <lightning:button label="parentApply" onclick="{!c.applyHandle}" disabled="false" />
                </div>
            </lightning:layoutItem>
        </lightning:layout>
        <lightning:layout multipleRows="true">
            <lightning:layoutItem size="12" padding="around-small">
            <li>
                <!--三元表達式-->
                <aura:if isTrue="{!v.read}">
                    you can read it.
                    <aura:set attribute="else">
                        you cannot read it.
                    </aura:set>
                </aura:if>
            </li>
            <li>displayMonth in parent: {!v.displayMonth}</li>
            </lightning:layoutItem>
        </lightning:layout>  
        <lightning:layout multipleRows="true">
            <lightning:layoutItem size="12" padding="around-small">
                <!--實例化childAura組件-->
                <c:childAura childDisplayMonth="{!v.displayMonth}" />
            </lightning:layoutItem>          
        </lightning:layout>        
    </div>
</aura:component>    

parentAura.css

.THIS {
    background-color: grey;
}

.THIS.white {
    background-color: white;
}

parentAuraController.js

({
    handleInit: function (cmp, event, helper) {
        // 初始化組件時，調用Help.js中getDisplayMonths函數，獲取下拉框值列表
        helper.getDisplayMonths(cmp);
    },

    changeDisplayMonth: function (cmp, event, helper) {
        console.log("displayMonths: " + cmp.get('v.displayMonths'))
        console.log("selected displayMonth: " + cmp.get('v.selectedDisplayMonth'));
        
    },

    applyHandle: function (cmp, event, helper) {
        // 點擊parentApply按鈕時，將下拉框選中的值賦值給屬性displayMonth
        cmp.set('v.displayMonth', cmp.get('v.selectedDisplayMonth'));
        // 點擊parentApply按鈕時，將true賦值給屬性read.
        cmp.set('v.read', "true");
        console.log("after click apply, displayMonth: " + cmp.get('v.displayMonth'));
    }
})

parentAuraHelper.js

({
    getDisplayMonths : function(cmp) {
        // 獲取controll.cls類中getDisplayMonths函數
        var action = cmp.get("c.getDisplayMonths");
        // 爲該函數設置回調函數
        action.setCallback(this, function (response) {
            var status = response.getState();
            console.log("get displayMonths: " + status);
            // 判斷調用controller.cls類getDisplayMonths函數的響應狀態碼
            if (status == "SUCCESS") {
                // 解析controller.cls傳回的響應，並賦值給變量repsonseBody
                var responseBody = JSON.parse(response.getReturnValue());
                // 將變量responseBody賦值給組件屬性displayMonths(下拉框值列表)
                cmp.set("v.displayMonths", responseBody);
            }
        });
        // 執行獲取數據行動
        $A.enqueueAction(action);
    }
})

ParentAuraController.cls

public with sharing class ParentAuraController {
    @AuraEnabled
    public static String getDisplayMonths() {
        List<String> displayMonths = new List<String>();
        displayMonths.add('Last 6 Months');
        displayMonths.add('Last 12 Months');
        displayMonths.add('Last 18 Months');
        displayMonths.add('Last 36 Months');
        // 將響應序列化爲Json格式
        return JSON.serialize(displayMonths);
    }
}

---

2. Child組件

childAura.cmp

<!--Child component-->
<aura:component>
    <aura:attribute name="childDisplayMonth" type="String" default="child"/>    
    <div class="slds-p-top--large">
        <lightning:layout multipleRows="false">
            <lightning:layoutItem size="4" padding="around-small">
                displayMonth in child: {!v.childDisplayMonth}
            </lightning:layoutItem>   
            <lightning:layoutItem size="4" padding="around-small">
                <lightning:button label="childApply" onclick="{!c.applyHandle}" disabled="false" />
            </lightning:layoutItem>  
        </lightning:layout>       
    </div>
</aura:component>    

childAura.css

.THIS {  
    background-color: LightSkyBlue;
}

childController.js

({
    applyHandle : function(component, event, helper) {
        component.set('v.childDisplayMonth', 'Last 36 Months');
    }
})

3. 結果分析

加載後以下圖所示：

分析：

• 初始化parentAura組件時，從controller.cls中獲取displayMonths值列表["Last 6 Months", "Last 12 Months", "Last 18 Months", "Last 36 Months"]，默認加載第一個值，因此下拉框中爲Last 6 Months.
• read屬性的默認值設爲false，因此三元表達式中選擇else項，打印：you cannot read it.
• displayMonth的默認值設置爲Last 6 Months, 打印：displayMonth in parent: Last 6 Months.
• 在parentAura組件中初始化childAura組件時，傳遞childDisplayMonth值等於displayMonth，因此該屬性值爲Last 6 Months，而不使用默認值child，打印displayMonth in child: Last 6 Months.　　

更換下拉框值，並點擊parentApply按鈕：

分析：

• 下拉框選擇Last 12 Months，點擊parentApply按鈕時，調用parentAuraController.js中applyHandle函數。該函數中，將selectedDisplayMonth賦值給displayMonth，打印：displayMonth in parent: Last 12 Months；將read屬性從新賦值爲true，因此三元表達式中選擇if項，打印：you can read it.
• 在parentAura組件中實例化childAura組件時，賦值childDisplayMonth採用的是綁定的方式{!**}，因此修改parentAura組件中displayMonth屬性值時，同步修改childAura組件中childDisplayMonth值。（本身能夠嘗試非綁定方式，查看結果如何）

點擊childParent按鈕：

分析：

• 點擊childApply按鈕，觸發childAura組件childAuraController.js的applyHandle函數，該函數從新賦值屬性childDisplayMonth等於Last 36 Months，打印：displayMonth in child: Last Months
• 在parentAura組件中實例化childAura組件時，賦值childDisplayMonth採用的是綁定的方式{!**}，因此修改childAura組件中childDisplayMonth屬性值時，同步修改parentAura組件中displayMonth值。（本身能夠嘗試非綁定方式，查看結果如何）

---

 

做者：吳家二少

博客地址：https://www.cnblogs.com/cloudman-open/

本文歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接