禁用按钮的最佳方法是什么,因此knockout.js不会发生双击。我有一些用户快速点击导致多个ajax请求。我认为knockout.js可以通过多种方式处理这个问题,并希望看到其中的一些替代方案。
答案 0 :(得分:14)
使用信号量(旋转锁定)。基本上,您可以计算元素已注册的点击次数,如果它大于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
}
答案 1 :(得分:12)
我遇到了类似的问题,表单向导通过Ajax按钮点击提交数据。我们为每个步骤选择性地显示4个按钮。我们创建了一个布尔可观察的ButtonLock
,如果它是真的,则从提交函数返回。然后我们还将每个按钮的disable
数据绑定到ButtonLock
可观察
视图模型:
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);
}"/>
如果您只需要防止多次点击,我更喜欢布尔值。但是,如果您想要该功能,计数器方法可让您检测双击并单独处理它们。
答案 2 :(得分:6)
如果有人还在寻找一种方法来做到这一点。我发现你可以使用布尔值。
self.disableSubmitButton= ko.observable(false);
self.SubmitPayment = function () {
self.disableSubmitButton(true);
//your other actions here
}
然后在你看来
data-bind="click:SubmitPayment, disable:disableSubmitButton"
答案 3 :(得分:1)
我用自定义绑定做到了这一点:
myElement.node
myElement