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?

  • are you passing any value to c:checkboxItem ? – Oleksandr Berehovskyi Oct 25 '18 at 9:46
  • yes, an Id that make the child belongs to the parent. – CRK Oct 25 '18 at 9:47
  • why pass a boolean attribute? @MartinLezer how can a boolean value solve my problem? – CRK Oct 25 '18 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. – Martin Lezer Oct 25 '18 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 Oct 25 '18 at 9:54
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.

0

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();
     }
}

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.