knockout.jsのCSSバインディングで「クリック」条件を追加するにはどうすればよいですか？次のようにknockout.jsでCSS-結合の

Question

ドキュメントに例を示します。

<div data-bind="css: { profitWarning: currentProfit() < 0 }"> 
    Profit Information 
</div> 

    <script type="text/javascript"> 
    var viewModel = { 
    currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class 
}; 
    viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied 
</script> 

この例では、「profitWarning」currentProfitが負の適用のように思え。これを少し変更して、divがクリックされたときにこのクラスを適用したいと思います。この例に「クリック」条件を適用するにはどうすればよいですか？また、私はあなたが結合]をクリックし使用することができます（div要素がクリックされたスタイルを適用し、別のdivがクリックされたときにそれを削除）、複数のdivを作成し、一度に一つだけのスタイルを適用するために

おかげ

Answer 1

をしたいです。

clickバインドではイベントハンドラが追加され、関連するDOM要素がクリックされたときに選択したJavaScript関数が呼び出されます。これは、最も一般的にボタン、入力、などの要素で使用されるが、実際に目に見えるDOMのelemenここ

http://knockoutjs.com/documentation/click-binding.html

と連携した例である。

function viewModel() { 
 
    var self = this; 
 
    self.isSelected = ko.observable(false); 
 
    self.className = ko.pureComputed(function(){ 
 
    return self.isSelected()? "SelectedClass" : "NotSelectedClass"; 
 
    }, self); 
 
    self.change = function() { 
 
    self.isSelected(!self.isSelected()); 
 
    } 
 
} 
 

 
ko.applyBindings(new viewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div data-bind="text: className"></div> <br/> 
 
<div data-bind="css: className">Inspect this Div</div> <br/> 
 
<input type="button" data-bind="click: change" value="Toggle" />

2番目の質問では、divのそれぞれに対してブール値を2つずつ指定して、どちらがクリックされたかを確認し、クリックしたものを設定することができます。b yユーザーをtrueに設定し、残りをfalseに設定します。