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

Question

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

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

...
<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 部分，在加载行的位置，我设置了按钮 disabled/enabled，虽然我还没有弄清楚如何删除禁用按钮上的手形光标？

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

Answer 1

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

因此，如果“数据”是一个对象数组，您可以向其添加一个可观察对象属性，然后将禁用绑定到该属性。

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

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

sendDataToApi: function (e) {

并将绑定更改为：

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

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

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

Knockout + MVC disable html button and change color after ajax call

c#

asp.net-mvc

knockout.js