How to prevent function with parameters from being called on page load?-CodePudding

I have a function that is called after button is clicked. it looks like this

<button  data-bind="click: $root.openModal">

Now I am trying to pass parameters to this function. Resulting in this code

<button  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',
        onl oad: 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?

CodePudding user response：

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',
        onl oad: 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]);
        }
    });
 };
};