Question

我有一个工作面板，带有单选按钮，标签和文本字段。一切都很好，除非我明确点击单选按钮，单选按钮不会改变单选按钮视图。

这里plnkr链接到它：

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

Answer 1

我猜点击绑定与检查绑定有冲突。

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

您可以检查修改过的代码（我省略了重点标记，而不是简单）：

＆＃13;

// 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);

＆＃13;

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

＆＃13;

    <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>

＆＃13;

Answer 2

问题是通过单击单选按钮，会发生两件事：

checked绑定做其事
事件会冒泡到父元素，而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/

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

3 个答案: