knockout.js - 复选框不会在 Knockout 中使用数据绑定(bind)保持选中状态

Question

我有一个复选框，我想在单击它时执行一个功能。问题是，它需要根据复选框是否被选中来执行不同的功能。因此，我设置了一个默认设置为 false 的状态可观察对象:

self.status = ko.observable(false);

我在点击时将一个函数绑定(bind)到复选框:

<input type="checkbox" data-bind="click: modify, checked: status">

然后我创建了一个函数来根据可观察到的状态是真还是假来执行不同的函数:

self.modify = function() {
    if (self.status() == false) {
        // Some other code
        alert('Now True!')
        self.status(true);
    }
    else if (self.status() == true) {
        // Some other code
        alert('Now False!');
        self.status(false)
    }
}

这个函数工作得很好。它根据状态是真还是假来提醒正确的消息，但问题是，当状态为真时，我似乎无法让复选框保持选中状态。

http://jsfiddle.net/tsnolan23/s441hggL/

关于复选框未保持选中状态的任何想法？

Answer 1

这是发生了什么:

1. 您点击复选框。
2. 点击处理程序触发，它设置状态。
3. checked 处理程序触发，它更改复选框状态。
4. 事件冒泡到浏览器，浏览器还原更改。
5. Knockout 注意到这一点，并再次更新 status。

这是一种完全不同的方法，为此目的使用可写计算:

var Vm = function() {
  var self = this;
  var _isActive = ko.observable(false);
  self.isActive = ko.computed({
    read: _isActive,
    write: function(newValue) {
      _isActive(newValue);
      if (!!newValue) { alert("Something..."); }
      else { alert("Another thing."); }
    }
  });
};

ko.applyBindings(new Vm());
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<label>
  <input type="checkbox" data-bind="checked: isActive" /> Check me!
</label>

如果出于某种原因您必须使用click 绑定(bind)，那么您应该做两件事:

• 从您的处理程序返回 true
• 在绑定(bind)上设置clickBubble: false

例如:

var Vm = function() {
  var self = this;
  
  self.isActive = ko.observable(false);
  
  self.modify = function() {
    if (self.isActive() == false) {
      // Some other code
      alert('Now True!')
    }
    else if (self.isActive() == true) {
      // Some other code
      alert('Now False!');
    }
    
    return true;
  }
};

ko.applyBindings(new Vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<label>
  <input type="checkbox" data-bind="click: modify, clickBubble: false, checked: isActive" /> Check me!
</label>
<pre data-bind="text: ko.toJSON($root)"></pre>