Knockout + MVC 禁用 html 按钮并在 ajax 调用后更改颜色

Posted 2023-03-27

【中文标题】Knockout + MVC 禁用 html 按钮并在 ajax 调用后更改颜色

【英文标题】：Knockout + MVC disable html button and change color after ajax call

【发布时间】：2021-06-06 06:12:42

【问题描述】：

我想在 ajax 调用成功后切换按钮的disabled 属性。 该按钮正在对后端进行 ajax 调用，如果返回成功，我必须禁用该特定按钮。

我有 n 个按钮，因为它们是在 foreach 循环中为表格行生成的。

...
<td>
    <button class="button primary" data-bind="click: $parent.sendDataToApi, attr: 'disabled' : passedIntegration , style:  background: passedIntegration ? 'gray' : '' ">Send button</button>
</td>
...

我的问题是，我是否需要为每个按钮设置 id 选择器，或者以某种方式“知道”哪个按钮被 ajax 调用，并且只有该按钮才能禁用并将颜色更改为灰色？

我的 knockout.js 文件如下所示：

define(['viewmodels/shell', 'durandal/services/logger', 'plugins/dialog', 'viewmodels/shell', 'toastr', 'knockout', 'kovalidationconfig', 'plugins/router', 'typeahead.bundle'],
    function (shell, logger, dialog, shell, toastr, ko, kvc, router, typeahead) 
        var vm = 
            activate: activate,
            shell: shell,
            data: ko.observableArray([]),
            close: function () 
                $(window).off('popstate', vm.goBack);
                $(window).off('resize', adjustModalPosition);
                dialog.close(vm, 'cancel');
            ,
            goBack: function () 
                $(window).off('popstate', vm.goBack);
                $(window).off('resize', adjustModalPosition);
                dialog.close(vm, 'back');
            ,
            editPreregisteredChildren: function () 
                router.navigate("#/function/" + this.id);
            ,
            sendDataToApi: function () 
                $.ajax(
                    type: "POST",
                    url: rootUrl + 'home/sendData',
                    data: ko.toJSON(
                        requestId: this.id

                    ),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) 
                        if (data.success === true) 
                            toastr.success(data.message)
                            // set that specific button disabled, remove hand-cursor, change background color to gray
                         else 
                            toastr.error(data.message);
                        
                    
                   
                );
            
        ;
);

如您所见，我完成了 GET 部分，在加载行时，我设置了禁用/启用按钮，虽然我还没有弄清楚如何删除禁用按钮上的手形光标？

我坚持使用其他部分，当我进行 ajax 调用时，如果调用成功，我还需要禁用按钮。 有什么建议吗？

【参考方案1】：

有几种方法可以处理它。您没有发布您在 forEach 循环中使用的变量，但这取决于它。我将假设它是“数据”observableArray。

所以如果“数据”是一个对象数组，你可以给它添加一个可观察的属性，然后将禁用绑定到该属性。

data = [property: ..., disable: ko.observable()]

然后你可以通过在方法中添加一个参数来将你所在的数组对象传递给方法，如下所示：

sendDataToApi: function (e) 

并将绑定更改为：

data-bind="click: $parent.sendDataToApi($data), disable: disable"

这将使方法中的“e”成为您当前正在进行的迭代，然后您可以在适当的时候更改 set e.disable(true)。