Cambio de clase CSS en knockout.js clic con el ratón sobre

Question

La documentación knockout.js muestra la unión como esto css:

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

necesito para adaptarla a cambiar la clase css de clic de ratón. ¿Cómo puedo hacer esto?

Sobre la base de respuestas a continuación, estoy usando un código como éste:

// 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);    
    };   
}; 

Sin embargo, esto no se está expandiendo el ancho de la lista de selección. ¿Qué estoy haciendo mal?

Answer 1

La manera más simple es usar un click binding que cambia un observable en la devolución de llamada. Debería enlazar la clase apropiadamente usando algo como attr binding

Answer 2

Haga que su función de clic cambie una variable observable. Para 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> 

Nota: Puede combinar click y css en el mismo elemento. Por ejemplo:

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

Answer 3

Creo que el problema es con la etiqueta de secuencia de comandos.

Por favor, encontrar la solución en el siguiente enlace: http://jsfiddle.net/ZmU6g/3/