変更するCSSクラスは

Question

knockout.jsのドキュメントは次のように結合CSSを示しクリック：

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

私はマウスクリックのCSSクラスを変更するためにそれを適応させる必要があります。これどうやってするの？下の回答に基づいて

は、私はこのようないくつかのコードを使用しています：

// CSS class to be applied 
<style> 
    .bigclass 
    { 
     width: 200px; 
    } 

</style> 

// Select list inside a jquery .tmpl 
<script id='criteriaRowTemplate' type='text/html'> 
    <tr> 
     <td> 
      <select data-bind='click: makeBig, css: {bigclass : SelectHasFocus() > 0}' /> 
     </td> 
    </tr> 
</script> 

// Knockout.js Viewmodel 
var CriteriaLine = function() { 
    this.SearchCriterion = ko.observable(); 
    this.SelectHasFocus = ko.observable(0); 

    // this method is called 
    makeBig = function(element) { 
     this.SelectHasFocus(1);    
    };   
}; 

しかし、これは、選択リストの幅を広げていません。私は間違って何をしていますか？

Answer 1

最も簡単な方法は、click bindingを使用して、コールバック内の観測値を変更することです。 attr binding

Answer 2

あなたのクリック機能で観察可能な変数を変更しましたか？ exampleの場合：

<div data-bind="css: { myclass: newClass() == true }"> 
    Profit Information 
</div> 

<button data-bind="click: changeClass">Change Class</button> 

<script type="text/javascript"> 
    var viewModel = { 
     newClass: ko.observable(false), 
     changeClass: function() { 
      viewModel.newClass(true); 
     } 
    }; 
</script> 

注：同じ要素にclickとcssを組み合わせることができます。たとえば、

<div databind="click: changeClass, css: { myclass: newClass() == true }"></div> 

Answer 3

スクリプトタグで問題があると感じます。

次のリンクで解決策を見つけるしてください：http://jsfiddle.net/ZmU6g/3/