knockout.js 如何防止在页面加载时调用带参数的函数？

jgwigjjp 于 2022-11-10 发布在其他

关注(0)|答案(2)|浏览(154)

我有一个在单击按钮后调用的函数。

<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（）之间有什么区别？我如何将参数传递给这个函数，而不会在页面加载时触发它？

knockout.js

来源：https://stackoverflow.com/questions/72099031/how-to-prevent-function-with-parameters-from-being-called-on-page-load

2条答案

按热度按时间

cnjp1d6j1#

这是因为您要在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]);
        }
    });
 };
};

赞(0）回复(0）举报 2022-11-10

wpcxdonn2#

或者，您可以只传递一个函数文本作为单击处理程序：
<button data-bind="click: () => $root.openModal(Object.Keys(params))">
我个人更喜欢这样，因为这意味着你不必复制你的openModal函数。

赞(0）回复(0）举报 2022-11-10