如何使用 knockout.js 启用或禁用按钮

Question

我想在用户单击按钮并且服务器正在处理某些数据时使用 knockout.js 禁用按钮。我正在查看淘汰赛教程中的 example，但似乎遗漏了什么。

我在 data-bind 中有 enable: 部分：

<body>
    <form id="form1" runat="server" >
    <h1 style="text-align: center">Select the item(s) you want.</h1>
        <br />
        <br />
        <div id="buttons" style="text-align: center">
            <button data-inline="true" data-bind="click: submit, enable: canSubmit" >Submit</button>
            <button data-inline="true" data-bind="click: cancel">Cancel</button>
        </div>

我已将视图模型中的一个可观察对象设置为 false。然而，按钮是初始化视图时在页面上启用。所以我认为这是一个数据绑定问题。

function ViewModel() {
    var self = this;
    self.selectedItems = ko.observableArray([]);
    // we should start off not being able to click the submit button
    self.canSubmit = ko.observable(false);
};

我想在用户单击提交按钮之前启用该按钮，然后在服务器完成该操作之前禁用它。

self.submit = function () {
        // disable submit button
        self.canSubmit = false;
        // do stuff
        self.canSubmit = true;
};

如何将 enable 可观察值绑定到按钮？

Answer 1

你错误地用直接的 js 变量替换了你的 observable。 canSubmit 是一个 observable，所以通过调用函数改变它的值：

self.submit = function () {
        // disable submit button
        self.canSubmit(false);
        // do stuff
        self.canSubmit(true);
};

其余的都可以。

Answer 2

您没有更新您的可观察值，您正在更改 self.canSubmit 的引用，因此它指向一个布尔值。

将您的 self.submit 函数更改为：

self.submit = function () {
        // disable submit button
        self.canSubmit(false);
        // do stuff
        self.canSubmit(true);
};

如何使用 knockout.js 启用或禁用按钮

How to enable or disable a button using knockout.js

knockout.js