ノックアウトチェックボックストグル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クラス{チェックし、未チェック}のトグルがチェックです：CSSを：クリック：。私が正しいことをしていない少しのアイデア？ jsfiddle

Answer 1

代わりに結合cssを使用して、あなたはバインディングattrを使用して試してみて、class属性に直接結合することができます。 ko.computedメソッドを使用して、適切なCSSクラス名を返すことができます。また、user3297291が指定されているので、clickイベントは必要ありません。チェックボックスは、次のようになります。

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

そしてko.computed方法は次のようになります。

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

Answer 2

コメントに示唆されているように、チェックとクリックは効果的にお互いを否定します。チェックされたバインディングは、クリックが手動でもう一度切り替わる間に自動的に切り替わります。クリックを削除すると問題が解決されます。

<input type="checkbox" data-bind="css: { 'checked': dimitri, 'unchecked': !dimitri() }, checked: dimitri"> 

http://jsfiddle.net/KDypD/55/