Question

我有一个复选框，我想在点击它时执行一个功能。问题是，它需要根据是否选中复选框来执行不同的功能。因此，我设置了一个默认情况下设置为false的状态observable：

self.status = ko.observable(false);

我将一个功能绑定到单击复选框：

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

我根据状态observable是真还是假创建了执行不同函数的函数：

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

这里发生了什么：

您点击该复选框。
点击处理程序触发，设置status。
已检查的处理程序触发，它会更改复选框状态。
事件会冒泡到浏览器，从而恢复更改。
Knockout会注意到这一点，并再次更新status。

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果您必须因某种原因使用click绑定，那么您应该做两件事：

return true
在绑定上设置clickBubble: false

例如：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您不需要两个绑定。选中此复选框后，状态将会更改。您只需订阅observable即可注意到。（可写的计算解决方案大致相同，但比必要的复杂一点。）

var Vm = function() {
  var self = this;
  self.isActive = ko.observable(false);
  self.isActive.subscribe(function (newValue) {
    if (newValue) alert("Checked");
    else alert("Unchecked");
  });
};

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>

使用Knockout中的data-bind不会检查复选框

2 个答案: