Passing argument to onclick event

Question

I am dynamically creating HTML <div> and I need to handle the onclick event : when the user clicks on it, I want to call a controller function and this function requires an argument. How do I pass an argument to a reference function ?

Here is my code

$A.createComponent(
    "aura:html",
    {
        tag: "div",
        HTMLAttributes: {
            "class": "prestationBlock",

            // here I pass a reference to my controller function... How do I pass
            // an argument to this function ?
            "onclick": component.getReference("c.onPrestationClick")
        }
    },

    // called when the element is created
    function(div)
    {
           // ...
    }
);

Answer 1

My previous answer already demonstrated this, but here's another example:

<aura:application >
    <aura:attribute name="prestationBlocks" type="Aura.Component[]" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    {!v.prestationBlocks}
</aura:application>

---

({
    init: function(component, event, helper) {
        $A.createComponents(
            [
                ["div", { "data-id": 1, "class": "prestationBlock", onclick: component.getReference("c.click") }],
                ["div", { "data-id": 2, "class": "prestationBlock", onclick: component.getReference("c.click") }],
                ["div", { "data-id": 3, "class": "prestationBlock", onclick: component.getReference("c.click") }]
            ],
            function(divs) {
                component.set("v.prestationBlocks", divs);
            }
        );
    },
    click: function(component, event, helper) {
        alert(event.target.dataset.id);
    }
})

---

.THIS.prestationBlock {
    min-height: 3em;
    border: 3px solid red;
}

---

Notice how I attach a value to each div. In my case, they are hard-coded, but you simply need to put the correct ID in to a data attribute, and you can get it back during your click handler.

Answer 2

You can use explicit binding, more explanation on this: Docs
you can put the onPrestationClick on the helper, or the bussiness logic inside a function on the helper and you change to this:

var prestationClick = helper.prestationClick;
if (!$A.util.isUndefinedOrNull(prestationClick )) {
//explicit binding
    prestationClick = prestationClick.bind(null, param1, param2);
}
$A.createComponent(
    "aura:html",
    {
        tag: "div",
        HTMLAttributes: {
            "class": "prestationBlock",

            // here I pass a reference to my controller function... How do I pass
            // an argument to this function ?
            "onclick": prestationClick
        }
    },

    // called when the element is created
    function(div)
    {
           // ...
    }
);