'Data bind click even pass current object to parameter

I am looping through objects and I want to send only current object when clicked.

<div class="box" data-bind="foreach: contacts">
                <div class="contact LightGray-background">
                    <div class="contactType">
                        <label data-bind="text: contactLabel"></label>
                        <label style="font-size:smaller" data-bind="text:contactRole"></label>
                        <img class="hasInfoPopup" data-bind="click: $root.editContact($root)"
                             data-info="Edit Contact" src="~/images/plus-inverted-large.png" style="height:16px;width:16px;float:right" />
</div>

editContact() above is receiving all object values instead of only one.



Solution 1:[1]

You are calling editContact in your binding. That means knockout will call it once (passing $root) when ko.applyBindings runs. Assuming editContact does not return a function, the click binding will then be ignored.

If you pass $root.editContact without calling it, knockout will call it on click with two parameters: the current object ($data), and the click event.

data-bind="click: $root.editContact"

If your editContact requires this to refer to $root, you can use .bind:

data-bind="click: $root.editContact.bind($root)"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1