Специалист по компонентам Lightning Framework - Шаг 3-Супербадж

Question

Я не могу передать параметр boatTypeId к вспомогательному классу BoatSearchResultsHelper.js . Я сталкиваюсь с приведенной ниже ошибкой при выполнении вызова 3, указанного в суперспособности специалиста по компонентам Lightning. Не уверен, что я не могу поймать пропущенную точку. Пожалуйста, предложите.

Вот фрагменты кода:

<!--BoatSearchResults.cmp-->
<aura:component controller="BoatSearchResults" implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="boats" type="Boat__c[]"/> 
    <!-- set up the aura:method for search -->
    <aura:method name="search" action="{!c.search}">
        <aura:attribute name="boatTypeId" type="String"/>
    </aura:method>
    <div class='slds-m-around_medium'>
        <lightning:layout horizontalAlign="center" verticalAlign="center" multipleRows='true'>

            <aura:if isTrue="{!v.boats.length > 0}">
                <aura:iteration items="{!v.boats}" var="bot">
                    <lightning:layoutItem flexibility="grow" class="slds-m-around_small">
                        <c:BoatTile boat="{!bot}" />
                    </lightning:layoutItem>
                </aura:iteration>
                <aura:set attribute="else">
                    <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">
                        <ui:outputText value="No boats found" />
                    </lightning:layoutItem>
                </aura:set>
            </aura:if> 
        </lightning:layout>
    </div>
</aura:component>

//BoatSearchResultsController.js
({
    search: function(component, event, helper){ 
        var params = event.getParam('arguments'); 
        alert(params.boatTypeId); //<---getting proper value
        alert(component.set("v.boatTypeId", params.boatTypeId)); //<---here I am getting undefined
        var a = component.get('c.doSearch');
        $A.enqueueAction(a); 
    }, 
    doSearch : function (component, event, helper){ 
        alert(component.get("v.boatTypeId")); //<---here I am getting undefined
        helper.onSearch(component); //calling helper method
    },
})


//BoatSearchResultsHelper.js
({
    onSearch : function(component, event) {
        var boatTypId = component.get("v.boatTypeId");
        alert(boatTypId); //<---here I am getting undefined
        console.log("boatTypId--> " + boatTypId);
        var action = component.get("c.getBoats");
        action.setParams({boatTypeId:boatTypId});

        //add the callback behavior for when the response is received
        action.setCallback(this, function(response){
            var state = response.getState();
            console.log("state " + state);
            if(state === "SUCCESS"){
                var res = response.getReturnValue();
                component.set("v.boats", res);
                //console.log("v.boats ->"+ JSON.stringify(res));
            }
            else{
                console.log("Failed with state: " + state);   
            }
        });

        //send action off to be executed
        $A.enqueueAction(action);
    },
})

Answer 1

Я выяснил, в чем проблема.

Просто нужно добавить еще один атрибут <aura:attribute name="boatTypeId" type="String"/> ниже до <aura:method name="search" action="{!c.search}"> <aura:attribute name="boatTypeId" type="String"/> </aura:method>

Итак, окончательная разметка BoatSearchResults.cmp является:

<!--BoatSearchResults.cmp-->
<aura:component controller="BoatSearchResults" implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="boats" type="Boat__c[]"/> 
    <!-- set up the aura:method for search -->
    <aura:method name="search" action="{!c.search}">
        <aura:attribute name="boatTypeId" type="String"/>
    </aura:method>
    <aura:attribute name="boatTypeId" type="String"/>
    <div class='slds-m-around_medium'>
        <lightning:layout horizontalAlign="center" verticalAlign="center" multipleRows='true'>

            <aura:if isTrue="{!v.boats.length > 0}">
                <aura:iteration items="{!v.boats}" var="bot">
                    <lightning:layoutItem flexibility="grow" class="slds-m-around_small">
                        <c:BoatTile boat="{!bot}" />
                    </lightning:layoutItem>
                </aura:iteration>
                <aura:set attribute="else">
                    <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">
                        <ui:outputText value="No boats found" />
                    </lightning:layoutItem>
                </aura:set>
            </aura:if> 
        </lightning:layout>
    </div>
</aura:component>