5

I have 2 components. VariationComponent and PGP_Tab_bar_item. I create PGP_Tab_bar_item in the markup of VariationComponent . Want to perform some action on PGP_Tab_bar_item if event is fired from PGP_Tab_bar_item component.

I am using component.find({instancesOf:}) but it is giving an empty Array[].

VariationComponent :

<aura:attribute name="projects" type="Project__c[]" />

<ul class="slds-tabs--default__nav" role="tablist">
<aura:iteration items="{!v.projects}" var="project" indexVar="index">
    <c:PGP_Tab_bar_item project="{!project}" isProgramme="false" variationId="{!v.variationId}" active="false"/>
</aura:iteration>
</ul>

<ui:button label="Save" press="{!c.handlePGPTab}" class="slds-button slds-button--brand" aura:id="handle" />

Controller:

handlePGPTabEvent : function(component, event, helper){
    var tabs = component.find({ instancesOf : "c:PGP_Tab_bar_item" }) ;
    console.log(tabs); // output Array[] in console
}
  • I have seen the same behavior and have been unable to use that function. Looking at the open source aura files it looks like everything is in order, but for some reason it will never find components. – dsharrison Jun 23 '16 at 17:43
3

Try to add an aura:id to the UL:

<ul aura:id=“list” class=“slds-tabs—default__nav” role=“tablist">

And then use find().find():

var tabs = component.find(“list”).find({ instancesOf : “c:PGP_Tab_bar_item” });

I am not sure of the cause, but I have logged a bug on the Framework for us to investigate.

<aura:application >

    <aura:attribute name="projects" type="String[]" default="1,2,3"/>

    <ul aura:id="here">
        <aura:iteration items="{!v.projects}" var="project">
            <c:PGP_Tab_bar_item project="{!project}"/>
        </aura:iteration>
    </ul>

    <ui:button label="Save" press="{!c.handlePGPTabEvent}"/>

</aura:application>

({
    handlePGPTabEvent : function(component, event, helper){
        var tabs = component.find("here").find({ instancesOf : "c:PGP_Tab_bar_item" }) ;
        console.log(tabs);
    }
})

<aura:component >

    <aura:attribute name="project" type="String"/>

    <li>{!v.project}</li>

</aura:component>
  • Using component.find(“list”).find({ instancesOf : “c:PGP_Tab_bar_item” }) solved the issue. now finding the component. Thanks – Jai Chaturvedi Jun 23 '16 at 22:06
1

Alternatively, you can avoid the find().find() using aura:id on your rows:

    <aura:iteration items="{!v.projects}" var="project">
        <c:PGP_Tab_bar_item aura:id=“row” project=“{!project}"/>
    </aura:iteration>

    var tabs = component.find(“row”);

Contrary to DOM element id, aura:id can be repeated. In your situation, is is probably better since all your rows, if they exist, will be of c:PGP_Tab_bar_item, so you don’t have to find them by instance.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.