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

클릭 기능이 관찰 가능한 변수를 변경시키지 않았습니까?

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

참고 : example를 들어 동일한 요소에 click 및 css을 결합 할 수 있습니다. 예를 들면 다음과 같습니다.

Answer 3

스크립트 태그에 문제가 있다고 생각합니다.

다음 링크에서 솔루션을 검색 할 수 있습니다 : http://jsfiddle.net/ZmU6g/3/