Question

编辑添加：

这是我设法让它工作的唯一方法 - 我采用了'checked'绑定的ko实现并制作了一些小mod。看起来有点重量级，并且在框架更新时容易破坏但是嘿嘿......

我有一组收音机按钮，后面有一个淘汰赛vm。如果用户试图更改选择，我想首先向他们提供一个确认窗口（即“你确定吗？”）。

我已经成功完成了这项工作，但我对解决方案不满意 - 一个太复杂，另一个在确认窗口出现时显示了两个单选按钮。

我想截取点击，以便在UI中选择更改（或后备可观察对象）之前显示确认。我试图使用mouseup或mousedown事件绑定，但是我没有做任何事情阻止在选择取消更改后进行选择。

是否可以拦截点击并阻止变更传播？如果需要？

JS：

var model = {
  checkboxOptions : ["yes","no","maybe"],
  selectedOption : ko.observable(),
  showConfirm:function(data,ev){
    if(!confirm("go ahead?")){
      //doesn't work
      ev.stopPropagation();
      ev.preventDefault();
      return false;
    }  
  }
}
ko.applyBindings(model);

HTML：

<p>
<!-- ko foreach:checkboxOptions -->
<input type="radio" data-bind="event: {mouseup:$parent.showConfirm, click:null, mousedown:null}, value:$data,checked:$parent.selectedOption"/><span data-bind="text:$data"></span>
<!-- /ko -->
</p>
<p data-bind="text:selectedOption"></p>

codepen here

Answer 1

由于你想改变knockout检查绑定的工作方式，我可能会用bindingHandler来定制它，比如

<input type="radio" data-bind="radioWithConfirm: { selected: $parent.selectedOption }, value: $data"/>

ko.bindingHandlers.radioWithConfirm = {
  init: function(element, valueAccessor) {
    var options = valueAccessor();

    $(element).on('click', function(event) {
      if (!confirm('really?')) {
        event.preventDefault();
        return false;
      } else {
        options.selected(this.value);
        return true;
      }
    });
  }
}

CodePen here

拦截击倒单选按钮的点击次数

1 个答案: