0

How can I reach this behavior? My component is structured like this:

<aura:component>
     <button onclick="{!c.clearCheckbox}" />
     <aura:iteration items="{v.items} var="i">
           <c:checkboxItem />
     </aura:iteration>
</aura:component>

So, when I press the button on the parent, it have to clear all checkboxes created based on interation. I tried with an application event, but if I multiple times instance the parent component (for example 3 instances of the parent component (with all related childs), when I click on a button of a random instance component (for example the 2 instance) it fires the event and all children of all instances handle the event and I want to avoid this. Is there a better way for doing that, rather than a application event?

7
  • are you passing any value to c:checkboxItem ? Commented Oct 25, 2018 at 9:46
  • yes, an Id that make the child belongs to the parent.
    – CRK
    Commented Oct 25, 2018 at 9:47
  • why pass a boolean attribute? @MartinLezer how can a boolean value solve my problem?
    – CRK
    Commented Oct 25, 2018 at 9:49
  • Because there is an automatic binding between the parent and children shared attributes. If you declare a Boolean attribute in your parent component. You send this attribute to the children. And when the user click on the button, you change the value. The value inside your children will be automatically updated. Then, you can do anything you want inside your child component. If you want to check or uncheck the checkbox depending on this attribute value. Commented Oct 25, 2018 at 9:50
  • do you mean the checkbox into the child component has the attribute 'checked' binded to this value? The button is only a clear checkbox button.
    – CRK
    Commented Oct 25, 2018 at 9:54

2 Answers 2

1

I solved this way:

I create a public method for my child component

<aura:method name="clearCheckboxes" action="{!c.clearCheckboxes}" />

clearCheckboxes : function(cmp,evt,hlp){
     // handle checkboxes clear
}

Then I call this method from the parent clear button click this way:

handleClearButtonClick : function(cmp,evt,helper){
     var children = component.find("child"); // I assign an aura:id="child" for every child component I istanciated
     for(var i=0; i < children.length; i++){
           children[i].clearCheckboxes();
     }
}
0

This is how you can do it.

PARENT COMPONENT

Perform all the steps as below in your parent component.

1.Declare a variable, say as below.

<aura:attribute name="clearChildSelections" type="Boolean" default="false" />

2.Then in your JS controller of parent, when the button is clicked, set this variable:

// in the JS function, set the value to true
clearCheckbox : function(cmp, event, helper) {
    component.set("v.clearChildSelections", true);
}

3.Pass the clearChildSelections value to child as below:

....
<c:checkboxItem clearAllSelected="{!v.clearChildSelections}" />
....

CHILD COMPONENT

Perform all the steps as below in your child component.

1.Declare variable to accept the value being passed from parent and also declare a change handler on that attribute, something as below:

<aura:attribute name="clearAllSelected" type="Boolean" default="false" />
<aura:handler name="change" value="{!v.clearAllSelected}" action="{!c.clearAllSelection}"/>

2.Then define the handler action in your child component which takes care of clearing the selection.


So everytime, the button is clicked from Parent component, it passes the value to the Child component, and in Child component, because there is a change handler on that attribute, it responds to the action every time it gets a new value.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .