如何防止在页面加载时调用带参数的函数?

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

我有一个在单击按钮后调用的函数。看起来像这样

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

现在我正在尝试将参数传递给此函数。导致此代码

<button class=".." data-bind="click: $root.openModal(Object.Keys(params))">

参数已成功传递,但现在每当我加载页面时,甚至在单击按钮之前,都会调用 openModal 函数。即使我离开 '()' 而不是 openModal(Object.Keys(params)).

也会发生同样的情况

函数本身,看起来像这样

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]);
        }
    });
};

openModal 和 openModal() 之间有什么区别,如何将参数传递给此函数而不在页面加载时触发它?

那是因为您是在 data-bind="click: $root.openModal(Object.Keys(params))" 上调用该函数,而不是您想使用这些参数动态构建一个函数并在单击时执行它。

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]);
        }
    });
 };
};

或者,您可以只传递一个函数文字作为点击处理程序:

<button data-bind="click: () => $root.openModal(Object.Keys(params))">

我个人更喜欢哪个,因为这意味着您不必复制 openModal 函数。