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

【问题标题】：How to enable or disable a button using knockout.js如何使用 knockout.js 启用或禁用按钮
【发布时间】：2015-05-06 22:30:54
【问题描述】：

当用户单击按钮并且服务器正在处理一些数据时，我想使用 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>

我已将视图模型中的 observable 设置为 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 可观察值绑定到按钮？

【问题讨论】：

标签： knockout.js

【解决方案1】：

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

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

其余的都很好。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：