Jaki jest najlepszy sposób na wyłączenie przycisku, aby podwójne kliknięcie nie występowało w pliku knockout.js. Niektórzy użytkownicy robią szybkie kliknięcia, powodując wiele zapytań ajaxowych. Zakładam, że knockout.js poradzi sobie z tym na kilka sposobów i chciał zobaczyć niektóre alternatywy.Zapobieganie dwukrotnemu kliknięciu przycisku z knockout.js
Odpowiedz
Użyj semafora (spinning lock). Zasadniczo liczymy liczbę kliknięć zarejestrowanych przez element, a jeśli jest więcej niż 1, zwracamy wartość false i nie zezwalamy na następujące kliknięcia. Funkcji limitu czasu można użyć, aby usunąć blokadę, aby mogły ponownie kliknąć po powiedzeniu, 5 sekund. Można zmodyfikować przykład z http://knockoutjs.com/documentation/click-binding.html
Jak widać tutaj:
<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>
Poprzez zmianę logiki wewnątrz funkcji zagnieżdżonych do
if(this.numberOfClicks() > 1){
//TODO: Handle multiple clicks or simply return false
// and perhaps implement a timeout which clears the lockout
}
wpadłem na podobny problem z czarodziejem forma przekazywania danych przez Ajax po kliknięciu przycisku. Mamy 4 przyciski selektywnie widoczne dla każdego kroku. Stworzyliśmy boolean obserwowalny ButtonLock
i zwróciliśmy go z funkcji składania, jeśli to prawda. Wtedy też danych związała disable
każdego przycisku do ButtonLock
obserwowalne
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);
}
Przycisk:
<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);
}"/>
Jeśli wystarczy, aby zapobiec wielu klika, wolę logiczną . Jednak metoda licznika pozwala wykrywać podwójne kliknięcia i obsługiwać je osobno, jeśli chcesz tę funkcję.
Podoba mi się ta odpowiedź więcej. Daje to użytkownikowi wizualny wskaźnik tego, co się dzieje, a co z liczeniem. Użytkownik może kilkakrotnie kliknąć przycisk i bez wskazania, co się dzieje, aby mogli pomyśleć, że coś się zepsuło. – MorganTiley
Zgadzam się z @MorganTiley, jest to lepsze rozwiązanie –
Jeśli ktoś nadal szuka sposobu, aby to zrobić. Zauważyłem, że możesz użyć wartości boolowskiej.
self.disableSubmitButton= ko.observable(false);
self.SubmitPayment = function() {
self.disableSubmitButton(true);
//your other actions here
}
Następnie w widoku
data-bind="click:SubmitPayment, disable:disableSubmitButton"
Zrobiłem to ze zwyczajem Oprawa:
<button data-bind="throttleClick: function() { console.log(new Date()); }>
I wont double click quicker than 800ms
</button>
ko.bindingHandlers.throttleClick = {
init: function(element, valueAccessor) {
var preventClick = false;
var handler = ko.unwrap(valueAccessor());
$(element).click(function() {
if(preventClick)
return;
preventClick = true;
handler.call();
setTimeout(function() { preventClick = false; }, 800);
})
}
}
- 1. jQuery zapobieganie odświeżeniu strony po kliknięciu przycisku
- 2. Fokus wejściowy Knockout.js po kliknięciu
- 3. Zapobieganie zdarzeniu wstawiania wiersza tabeli po kliknięciu przycisku wewnątrz wiersza
- 4. Zapobieganie wykonywaniu kodu onblur po kliknięciu przycisku przesyłania
- 5. Zapobieganie animacji po kliknięciu przycisku "Wstecz" na pasku nawigacji?
- 6. Zapobieganie podwójnemu wyzwalaniu funkcji po wprowadzeniu fokusu i kliknięciu przycisku
- 7. Zapobieganie kliknięciu przez div
- 8. Zapobieganie dwukrotnemu uruchomieniu procedury składowanej w tym samym czasie.
- 9. Zapobieganie przesyłaniu formularzy po kliknięciu przycisku Wyślij za pomocą przycisku anulowania
- 10. Zapobieganie zamykaniu przycisku Wstecz aplikacji
- 11. jQuery.draggable() - Przywróć przy kliknięciu przycisku
- 12. Zapobieganie wystrzeliwaniu fokusu po kliknięciu elementu div
- 13. Zapobieganie ponownemu ładowaniu aktywności po kliknięciu SearchView
- 14. Zapobieganie kliknięciu podczas przeciągania węzła D3
- 15. Zapobieganie zaznaczaniu tekstu po dwukrotnym kliknięciu
- 16. Zapobieganie kliknięciu wyzwalacza nadrzędnego wyzwalacza potomnego
- 17. Zapobieganie ekspandowaniu WPF przed rozwinięciem po kliknięciu nagłówka
- 18. Sprawdzanie poprawności Knockout.js przy użyciu przedłużaczy - zapobieganie walidacji przy obciążeniu
- 19. Jak otworzyć układ przy kliknięciu przycisku (Android)?
- 20. Jak otworzyć menu kontekstowe po kliknięciu przycisku?
- 21. aktywować aplikację po kliknięciu przycisku zasilania
- 22. android edittext usuwa fokus po kliknięciu przycisku
- 23. Zanikanie wyskakującego okna po kliknięciu przycisku?
- 24. Aktualizacja danych (JQuery) po kliknięciu przycisku
- 25. jQuery - Zwiększ wartość licznika po kliknięciu przycisku
- 26. Jak otworzyć Eksploratora Windows po kliknięciu przycisku?
- 27. Zmiana nazwy przycisku po kliknięciu - Java JButton
- 28. Android: Przełącz kamerę po kliknięciu przycisku
- 29. zmienia kolor tła przycisku po kliknięciu
- 30. Pytanie o potwierdzenie po kliknięciu przycisku "X"
Świetna odpowiedź! Może to również zostać przekształcone w niestandardowe wiązanie kliknięć. – madcapnmckay
Doskonała odpowiedź. Poszedłem dalej i zawijałem wszystkie moje połączenia w ten sposób bez problemu, i resetowałem kliknięcia po każdym wywołaniu ajax, ogólnie rzecz biorąc. Zastanawiam się, jak może wyglądać niestandardowe powiązanie. –