knockout.js Knockout + MVC禁用html按钮并在 AJAX 调用后更改颜色

2j4z5cfb  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(147)

我想在 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选择器,或者knockout不知何故“知道”哪个按钮是 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 调用,如果调用是成功的,我也需要禁用按钮。有什么建议如何做到这一点?

csbfibhn

csbfibhn1#

有几种方法可以处理它。你没有在forEach循环中使用哪个变量,但这取决于它。我将假设它是“data”observableArray。
因此,如果“data”是一个对象数组,则可以向其中添加一个可观察的属性,然后将disable绑定到该属性。

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

然后,您可以将参数加入至方法,将您正在行程的数组对象传递至方法,如下所示:

sendDataToApi: function (e) {

并将绑定更改为:

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

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

相关问题