Question

所以我有一个包装输入的标签。我有一个绑定到标签的click事件，另一个绑定到输入的函数更改。这些必须是发生的单独事情（还有其他事情可以改变价值，但我不希望点击处理程序触发那些）。

点击会按预期触发，但价值永远不会改变，更不用说触发相关功能了。

vm.hasBeenClicked = ko.observable(false);
vm.currentValue = ko.observable('default');

vm.onLabelClick = function(){
  vm.hasBeenClicked(true);
  //fires no problem
}

vm.currentValue.subscribe(function(){
  //this never fires
});

和html：

<label data-bind="click: onLabelClick">
  <input type="radio" data-bind="value: currentValue" />
</label>

Answer 1

首先，您需要使用带有无线电和复选框的“已检查”绑定，而不是“值”。您还需要将return true;添加到onLabelClick函数，以便标签事件不会与无线电控件本身的click事件冲突。

var vm = {};

vm.hasBeenClicked = ko.observable(false);
vm.currentValue = ko.observable('default');

vm.onLabelClick = function(){
  vm.hasBeenClicked(true);
  //fires no problem
  return true;
}

vm.currentValue.subscribe(function(){
  console.log("updated");
});

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>


<label data-bind="click: onLabelClick">
  option 1
  <input type="radio" value='option 1' data-bind="checked: currentValue" />  
</label>
<label data-bind="click: onLabelClick">
  option 2
  <input type="radio" value='option 2' data-bind="checked: currentValue" />
</label>

<br/>
clicked: <span data-bind="text: ko.toJSON(hasBeenClicked)"></span>
<br/>
value: <span data-bind="text: ko.toJSON(currentValue)"></span>

Knockout click事件会阻止子值更改

1 个答案: