I have a function that is called after button is clicked. it looks like this
<button class=".." data-bind="click: $root.openModal">
Now I am trying to pass parameters to this function. Resulting in this code
<button class=".." data-bind="click: $root.openModal(Object.Keys(params))">
Parameters are passed successfully, but now whenever I load the page, before even clicking the button, openModal function is called. Same happens even if I leave '()' instead of openModal(Object.Keys(params)).
function itself, looks like this
self.openModal = function (keys) {
popupObservable(true);
self.modal = $.openModalDefault({
url: '#js-confirmation-dialog-template',
className: 'doc',
onLoad: function () {
popupObservable(false);
if (!$(selectors.confirmationModal)[0]) {
return;
}
var viewModel = new ConfirmationDialogViewModel(function () {
self.confirm(keys);
self.modal.close();
}, "This part is irrelevant");
ko.applyBindings(viewModel, $(selectors.confirmationModal)[0]);
}
});
};
What is the difference between openModal and openModal() and how do I pass parameters to this function without triggering it on page load?
That is because you are invoking the function on data-bind="click: $root.openModal(Object.Keys(params))" instead you want to construct a function dynamically with those parameters and execute that on click.
self.openModalWithParam = function (keys) {
// keys come from the outer function and returns a function for those values
return function () {
popupObservable(true);
self.modal = $.openModalDefault({
url: '#js-confirmation-dialog-template',
className: 'doc',
onLoad: function () {
popupObservable(false);
if (!$(selectors.confirmationModal)[0]) {
return;
}
var viewModel = new ConfirmationDialogViewModel(function () {
self.confirm(keys);
self.modal.close();
}, "This part is irrelevant");
ko.applyBindings(viewModel, $(selectors.confirmationModal)[0]);
}
});
};
};
Alternatively, you could just pass a function literal as the click handler:
<button data-bind="click: () => $root.openModal(Object.Keys(params))">
Which I would personally prefer because it means you don't have to duplicate your openModal function.