[SalesForce] How to pass data to lightning controllers with change events

I need more information about the context after triggering a change event.
I decided to use data- attributes (that can only be applied to regular html tags). Since I'm using <ui:inputNumber, I can't pass them directly. So I decided to wrap it with a div.

<div data-row="{!cell.rowKey}" data-column="{!cell.columnKey}">
    <ui:inputNumber change="{!c.cellChanged}" value="{!cell.value}" />
</div>
  • I can't use aura:id like suggested here, since I'm in an aura:iteration.
  • For a regular DOM event, I could probably use something like event.target.parentNode, but it is a lightning event, where there is no parent node.
  • I really only need it on a data change, so onmousewhatever won't do the trick.

Can I add the cell it self to the event? Or is there any chance to bubble this change event to the div, fire any other event to the div, or any other way to get the parent node in JS?

Best Answer

I came up with a component for the whole cell context, so I have all the information in one scope, that does also exist in my controller. This way I had the chance to easily fire my own event and add the data to its params. Thanks Martin Lezer and crmprogdev for your comments!

<aura:component >
    <aura:attribute name="cell" type="Object" />

    <aura:registerEvent name="cellChange" type="c:strike_evt" />

    <td>
        <ui:inputNumber change="{!c.cellChanged}" value="{!cell.value}" />
    </td>
</aura:component>

Controller:

cellChanged: function(cmp, evt, helper) {
    cmp.getEvent("cellChange")
            .setParams({ data: cmp.get("v.cell") })
            .fire();
},

fyi. c:strike_evt is a custom event that is part of the strike components containing a param called data of type Object.

In my main page it's easily hadled like this:

<aura:handler name="cellChange" event="c:strike_evt" action="{!c.cellChanged}" />

Controller:

cellChanged: function(cmp, evt, helper) {
    var rowKey = evt.getParam("data").rowKey;
    var columnKey = evt.getParam("data").columnKey;

    // do stuff
},
Related Topic