挖空点击事件可防止子值更改

Question

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

单击会按预期触发，但值永远不会更改，更不用说触发关联的函数了。

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

首先，您需要将"checked"绑定与单选按钮和复选框一起使用，而不是"value"。还需要向 onLabelClick 函数添加return true;，以便标签事件不会与单选控件本身的单击事件冲突。

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>