在knockout.js中切換css以更改選擇列表寬度

Question

我正在使用jQuery tmpl插件的Knockout.js。我定義的模板有幾個選擇列表。當單擊選擇列表（以容納列表中最長的元素）時，我需要擴展選定項目的寬度（在IE 8上）。當用戶點擊選擇列表來實現這一點時，我正在考慮切換CSS類，但我不知道如何去做。以下是我迄今爲止：

//CSS classes 
<style> 
    .bigclass 
    { 
     width: 200px; 
    } 
    .normalclass 
    { 
     width: auto; 
    } 
</style> 

// Call makeBig javascript method on mouseover. 
<script id='criteriaRowTemplate' type='text/html'> 
    <tr> 
     <td style="width: 23%"><select style="width: 100%" data-bind='event: { mouseover: makeBig, mouseout: makeNormal}, options: criteriaData, optionsText: "Text", optionsCaption: "--Select--", value: SearchCriterion' /></td> 
    </tr> 
</script> 

var CriteriaLine = function() { 
    this.SearchCriterion = ko.observable(); 

    //Control comes to this method. Not sure though if the element captured is correct. 
    makeBig = function(element) { 
     $(element).addClass("bigclass") 
    }; 
    makeNormal = function(element) { 
     $(element).addClass("normalclass") 
    }; 
}; 

所以我的問題是：

1. 我們如何通過選擇列表中的makeBig javascript函數？我相信我需要更改我的代碼中的以下語法： data-bind ='event：{mouseover：makeBig，mouseout：makeNormal

2. 我們如何將該類添加到傳遞的選擇列表中。我已經添加了代碼，但它不工作，也許因爲元素沒有價值。

3. 或者，有沒有其他方法可以確保用戶在IE 8中看到下拉列表的全文？

Answer 1

這裏是一個自定義綁定到一個CSS類添加到元素上徘徊： http://jsfiddle.net/BL9zt/

注意它簽約的IE特定mouseenter和mouseleave事件，所以你也必須引用jQuery的這在其他瀏覽器中模擬這些事件。

另外，剔除無關的方法描述如下： http://www.getharvest.com/blog/wp-content/uploads/2009/12/select_box_demo.html