Предотвратите двойной щелчок на кнопке с knockout.js

Ответ 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
}

Ответ 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);
        }"/>

Если вам просто нужно предотвратить несколько кликов, я предпочитаю логическое значение. Но метод счетчика позволяет обнаруживать двойные щелчки и обрабатывать их отдельно, если вы хотите эту функцию.

Ответ 3

Если кто-то все еще ищет способ сделать это. Я обнаружил, что вы можете использовать логическое значение.

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

Затем на ваш взгляд

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