在 knockout.js 中切换 css 以更改选择列表宽度答案

【问题标题】：Toggling css in knockout.js for changing select list width在 knockout.js 中切换 css 以更改选择列表宽度
【发布时间】：2012-06-28 08:24:53
【问题描述】：

我正在使用带有 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")
    };
};

所以我的问题是：

我们如何将选择列表传递给 makeBig javascript 函数？我相信我需要在我的代码中更改以下语法： data-bind='event: { mouseover: makeBig, mouseout: makeNormal
我们如何将类添加到传递的选择列表中。我已经添加了代码，但它不起作用，可能是因为元素没有值。
或者，是否有任何其他方法可以确保用户在 IE 8 中看到下拉菜单的全文？

【问题讨论】：

不能只绑定点击和模糊吗？
我可以绑定点击。例如在上面的代码中，我可以在点击时调用 expandOptions 方法。但是不知道怎么修改绑定后的css类。
如果使用 jquery，$(element).addClass("bigclass")
我还没有解决它，但这是我正在研究的小提琴，在咖啡脚本中......jsfiddle.net/keith_nicholas/j5Awx
谢谢@Keith。咖啡脚本版本有效。我怎样才能使它与淘汰赛和 jquery 一起工作？

标签： css internet-explorer-8 knockout.js selectlist jquery-templates

【解决方案1】：

这是一个自定义绑定，用于在悬停时向元素添加 CSS 类： http://jsfiddle.net/BL9zt/

请注意，它订阅 IE 特定的 mouseenter 和 mouseleave 事件，因此您还必须引用在其他浏览器中模拟这些事件的 jQuery。

此处描述了另一种与淘汰赛无关的方法： http://www.getharvest.com/blog/wp-content/uploads/2009/12/select_box_demo.html

【讨论】：