javascript - knockout 复选框切换 css 类并在单击时切换选中

Question

<div data-bind="css: { highlighted: highlight }, click: toggleHighlight">
  random string
</div>
<input type="checkbox" data-bind="css: { 'checked': dimitri, 'unchecked': !dimitri() }, click: toggledimitri, checked: dimitri"> 

var ViewModel = function() {
  var self = this;
  self.dimitri = ko.observable(false);
  self.toggledimitri = function() { self.dimitri(!self.dimitri()) };
  self.highlight = ko.observable(true);   
  self.toggleHighlight = function () { self.highlight(!self.highlight()) };
}

ko.applyBindings(new ViewModel());
var vm = ko.dataFor(document.body);

基本上，我所追求的是切换 css 类 {checked 和 unchecked}，同时还使用 knockout checked: css: 和 click: 来选中和取消选中复选框。有什么想法我做得不对吗？ jsfiddle

Answer 1

您可以尝试使用 attr 绑定(bind)并直接绑定(bind)到 class 属性，而不是使用 css 绑定(bind)。您可以使用 ko.computed 方法返回适当的 CSS 类名。此外，您不需要 user3297291 所述的 click 事件。复选框看起来像这样:

<input type="checkbox" data-bind="attr: { 'class': checkedClass }, checked: dimitri">

ko.computed 方法看起来像这样:

this.checkedClass = ko.computed(function() {
  return this.dimitri() ? 'checked' : 'unchecked';
}, this);

这是更新后的 fiddle 的链接，它演示了这一点:

http://jsfiddle.net/KDypD/56/