How to seperate info fired from multiple instances of same component in a parent component?

Question

Can we dynamically add a component multiple times and still retrieve information fired by these similar components uniquely in the parent component? I need to create a filter that shows fields, operator and value to be selected by the user. I will be creating a component for just a row of this kind and user can add / remove multiple filters. Can I collect data from these components uniquely when all these components will be firing the same event?

Answer 1

For a filtering mechanism, you probably want to apply all the filters, so you'll likely want to read all of them anyways. In addition, you'll probably want to bind the filter data to an attribute anyways. As such, your design would probably look like this:

<aura:attribute name="filters" type="Object[]" default="[]" />

---

<aura:iteration items="{!v.filters}" var="filter">
  <c:filterRow value="{!filter}" onupdate="{!c.applyFilters}" />
</aura:iteration>

---

({
  applyFilters: function(component, event, helper) {
    var filters = component.get("v.filters");
    // process filter information
  }
})

---

This isn't the only way to do this, but it's probably the easiest. Using component.find will only complicate your logic slightly, and other methods are probably less intuitive than this.