淘汰赛不会更改单选按钮视图

Question

我有一个带有单选按钮、标签和文本字段的工作面板。一切正常，除非我明确单击单选按钮，单选按钮不会更改单选按钮视图。

这里是 plnkr 链接：

https://embed.plnkr.co/auD0sMEL88EsuaQqvt7E/

Answer 1

我猜点击绑定与选中绑定冲突。

您可以使用计算来计算启用/聚焦标志。

您可以检查修改后的代码（为了简单起见，我省略了重点标志）：

// Code goes here
var DiscountViewModel = function() {

  var self = this;

  self.arbitrary = ko.observable();
  self.percent = ko.observable();
  self.permanent = ko.observable();

  self.discountValue = ko.observable('arbitrary');

  self.enableArbitrary = ko.computed(() => self.discountValue() === 'arbitrary');
  self.enablePercent = ko.computed(() => self.discountValue() === 'percent');
  self.enablePermanent = ko.computed(() => self.discountValue() === 'permanent');

  self.onArbitrary = onArbitrary;
  self.onPercent = onPercent;
  self.onPermanent = onPermanent;

  function onArbitrary() {
      self.discountValue('arbitrary');
  }

  function onPercent() {
      self.discountValue('percent');
  }

  function onPermanent() {
      self.discountValue('permanent');
  }

};

var vm = new DiscountViewModel();
ko.applyBindings(vm);

/* Styles go here */
.header-line {
  margin-bottom:20px; 
  margin-top:20px; 
  margin-left:20px;
}

    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.3/js/tether.js"></script>
    <link data-require="bootstrap@4.0.0-alpha.2" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
    <script data-require="bootstrap@4.0.0-alpha.2" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" type="text/javascript" defer="defer"></script>

  <h1 class="header-line">
      KO binding hasFocus over boolean values
    </h1>
    
    
    <div class="form-group row">
      <div class="col-xs-1">
      </div>
      <div class="col-xs-1">
        <input name="discount" type="radio" value="arbitrary" data-bind="checked: discountValue" />
      </div>
      <div class="col-xs-4">
        <label for="arbitrary" data-bind="click: onArbitrary">Discount arbitrary</label>
      </div>
      <div class="col-xs-5">
        <input type="text" class="form-control" id="arbitrary" placeholder="Enter arbitrary discount" data-bind="enable: enableArbitrary, value: arbitrary, hasFocus: enableArbitrary">
      </div>
    </div>
    
    <div class="form-group row">
      <div class="col-xs-1">
      </div>
      <div class="col-xs-1">
        <input name="discount" type="radio" value="percent" data-bind="checked: discountValue" />
      </div>
      <div class="col-xs-4">
        <label for="percent" data-bind="click: onPercent">Discount percent</label>
      </div>
      <div class="col-xs-5">
        <input type="text" class="form-control" id="percent" placeholder="Enter percent of discount" data-bind="enable: enablePercent, value: percent, hasFocus: enablePercent">
      </div>
    </div>
    
    <div class="form-group row">
      <div class="col-xs-1">
      </div>
      <div class="col-xs-1">
        <input name="discount" type="radio" value="permanent" data-bind="checked: discountValue" />
      </div>
      <div class="col-xs-4">
        <label for="permanent" data-bind="click: onPermanent">Discount permanent</label>
      </div>
      <div class="col-xs-5">
        <input type="text" class="form-control" id="permanent" placeholder="Enter permanent discount" data-bind="enable: enablePermanent, value: permanent, hasFocus: enablePermanent">
      </div>
    
    </div>

Answer 2

问题在于，单击单选按钮会发生两件事：

1. checked 绑定发挥作用
2. 事件冒泡到父元素，click 绑定也能做它的事。

您必须确保单击 input 元素会阻止 click 绑定触发。

R.P. Niemeyer 在这里给出了一个很好的答案：https://stackoverflow.com/a/14321399/3297291

Answer 3

正如@user3297291 提到的，检查和单击绑定会发生冲突。

添加此绑定：

ko.bindingHandlers.stopBubble = {
init: function(element) {
ko.utils.registerEventHandler(element, "click", function(event) {
     event.cancelBubble = true;
     if (event.stopPropagation) {
        event.stopPropagation(); 
     }
   });
  }
 };

您必须像这样在每个单选元素中添加此绑定：

    <input data-bind="checked: discountValue, stopBubble: true" id="discountArbitrary" name="discount" type="radio" value="arbitrary"  />

我创建了一个按您预期工作的 jsfiddle。 https://jsfiddle.net/astrapi69/s3r60uLu/