Changing css class in knockout.js on mouse click

Question

The knockout.js documentation shows the css binding like this:

   
    Profit Information         


        
                      

              相关标签:
       
      

Answer 1

Have your click function change an observable variable. For 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>

Note: You can combine click and css on the same element. For example:

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

Answer 2

I feel the problem is with script tag.

Please find the solution in following link: http://jsfiddle.net/ZmU6g/3/

Answer 3

The simplest way is to use a click binding which changes an observable in the callback. You would bind the class appropriately using something like the attr binding