Knockout click event предотвращает изменение дочерних значений - PullRequest
Новая
       31

Knockout click event предотвращает изменение дочерних значений

0 голосов
/ 03 мая 2018

Итак, у меня есть этикетка, обертывающая ввод. У меня есть событие 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>

1 Ответ

0 голосов
/ 04 мая 2018

Сначала вы захотите использовать привязку «флажок» с радио и флажками вместо «значение». Вам также необходимо добавить 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>
...