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

所以我的问题是：

我们如何将选择列表传递给makeBig javascript函数？我相信我需要在代码中更改以下语法： data-bind ='event：{mouseover：makeBig，mouseout：makeNormal
我们如何将类添加到传递的选择列表中。我添加了代码，但它不起作用，可能是因为元素没有值。
或者，有没有其他方法可以确保用户在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

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

1 个答案: