Thay đổi lớp css trong knockout.js trên chuột nhấp

Question

Các tài liệu knockout.js cho thấy css ràng buộc như thế này:

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

tôi cần phải thích nghi với nó để thay đổi lớp css trên mouseclick. Tôi có thể làm cái này như thế nào?

Dựa trên câu trả lời dưới đây, tôi đang sử dụng một số mã như thế này:

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

Tuy nhiên, đây không phải mở rộng độ rộng của danh sách lựa chọn. Tôi đang làm gì sai?

Answer 1

Cách đơn giản nhất là sử dụng số click binding để thay đổi có thể quan sát được trong hàm gọi lại. Bạn sẽ ràng buộc lớp học một cách thích hợp bằng cách sử dụng một cái gì đó giống như attr binding

Answer 2

Chức năng nhấp của bạn thay đổi một biến quan sát được. Đối với 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> 

Lưu ý: Bạn có thể kết hợp click và css trên cùng một nguyên tố. Ví dụ:

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

Answer 3

Tôi cảm thấy vấn đề là với thẻ tập lệnh.

Hãy tìm ra giải pháp trong liên kết sau đây: http://jsfiddle.net/ZmU6g/3/