knockout.js

Question

के साथ एक बटन पर डबल क्लिक को रोकें बटन को अक्षम करने का सबसे अच्छा तरीका क्या है, इसलिए डबल क्लिक नॉकआउट.जेएस के साथ नहीं होता है। मेरे पास कुछ उपयोगकर्ता बहुत से AJAX अनुरोधों के कारण कुछ त्वरित क्लिक कर रहे हैं। मुझे लगता है कि knockout.js इसे कई तरीकों से संभाल सकता है और वहां कुछ विकल्पों को देखना चाहता था।

Answer 1

एक सेमफोर (कताई ताला) का प्रयोग करें। असल में, आप गिनते हैं कि किसी तत्व ने कितने क्लिक पंजीकृत किए हैं और यदि यह 1 से अधिक है तो आप झूठी वापसी करते हैं और निम्न क्लिक की अनुमति नहीं देते हैं। लॉक को साफ़ करने के लिए टाइमआउट फ़ंक्शन का उपयोग किया जा सकता है ताकि वे 5 सेकंड के बाद फिर से क्लिक कर सकें।

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

Answer 2

मैं एक रूप जादूगर प्रस्तुत करने डेटा के साथ एक समान समस्या में पड़ गए करने के लिए

<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> 

नेस्टेड समारोह अंदर तर्क बदलकर: आप से http://knockoutjs.com/documentation/click-binding.html

उदाहरण में बदलाव के रूप में यहाँ देखा जा सकता था बटन क्लिक पर अजाक्स के माध्यम से। हमारे पास प्रत्येक चरण के लिए चुनिंदा 4 बटन हैं। हमने एक बूलियन अवलोकन ButtonLock बनाया और यह सच होने पर सबमिशन फ़ंक्शन से लौटा। तो फिर हम भी डेटा-बाउंड ButtonLock नमूदार

ViewModel के लिए प्रत्येक बटन के disable:

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); 
     }"/> 

तुम सिर्फ अनेक क्लिक रोकने के लिए की जरूरत है, मैं बूलियन पसंद करते हैं । लेकिन यदि आप उस सुविधा को चाहते हैं तो काउंटर विधि आपको डबल क्लिक का पता लगाने और उन्हें अलग से संभालने देती है।

Answer 3

यदि कोई भी अभी भी ऐसा करने का तरीका ढूंढ रहा है। मैंने पाया कि आप एक बुलियन का उपयोग कर सकते हैं।

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

तो आपके विचार

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

Answer 4

मैं एक कस्टम बंधन के साथ ऐसा किया में:

<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); 
     }) 
    } 
}