使用knockout.js防止双击按钮

Question

禁用按钮的最好方法是什么，这样在knockout.js中就不会出现双击。我有一些用户做一些快速点击导致多个ajax请求。我假设knockout.js可以通过几种方式处理这个问题，并希望看到一些替代方案。

Answer 1

使用信号量(旋转锁)。基本上，计算元素已经注册的点击次数，如果超过1，则返回false，并且不允许随后的点击。可以使用超时功能来清除锁定，以便他们可以在比方说5秒后再次点击。您可以修改http://knockoutjs.com/documentation/click-binding.html中的示例

如下所示：

<div>
 You've clicked <span data-bind="text: numberOfClicks"></span> times
 <button data-bind="click: incrementClickCounter">Click me</button>
</div>

<script type="text/javascript">
 var viewModel = {
     numberOfClicks : ko.observable(0),
     incrementClickCounter : function() {
         var previousCount = this.numberOfClicks();
         this.numberOfClicks(previousCount + 1);
     }
 };
</script>

通过将嵌套函数中的逻辑更改为

if( this.numberOfClicks() > 1 ){
 //TODO: Handle multiple clicks or simply return false
 // and perhaps implement a timeout which clears the lockout
}

Answer 2

我在一个表单向导中遇到了类似的问题，该向导在单击按钮时通过Ajax提交数据。对于每个步骤，我们有4个按钮可供选择。我们创建了一个布尔型可观察ButtonLock，如果为真，则从提交函数返回。然后，我们还将每个按钮的disable数据绑定到ButtonLock可观察对象

ViewModel：

var viewModel = function(...) {
    self.ButtonLock = ko.observable(false);

    self.AdvanceStep = function (action) {
        self.ButtonLock(true);
        // Do stuff
        // Ajax call
    }

    self.AjaxCallback = function(data) {
        // Handle response, update UI
        self.ButtonLock(false);
    }

按钮：

<input type="button" id="FormContinue" name="FormContinue" class="ActionButton ContinueButton"
    data-bind="
        if: CurrentStep().actions.continueAction,
        disable: ButtonLock,
        value: CurrentStep().actions.continueAction.buttonText,
        click: function() {
            AdvanceStep(CurrentStep().actions.continueAction);
        }"/>

如果你只需要防止多次点击，我更喜欢布尔值。但是counter方法可以让您检测双击并单独处理它们，如果您想要该功能的话。

Answer 3

以防有人还在寻找这样做的方法。我发现你可以使用布尔值。

self.disableSubmitButton= ko.observable(false);
  self.SubmitPayment = function () {
        self.disableSubmitButton(true);
       //your other actions here
        }

那么在你看来

data-bind="click:SubmitPayment, disable:disableSubmitButton"