使用敲出来为kendo-ui输入wrraper的宽度

Question

我在durandal项目中工作（javascript和html写在分隔的页面中）。 我有kendo-combo，我通过声明wrraper-input宽度给它宽度。 它运作良好。 但是，当我将其更改为绑定时 - 它不起作用。 这是我的代码（不起作用）：

HTML：

<input id="kendoCombo" data-bind=" value:'444', style:{width:width},
        kendoDropDownList: { dataSource: data,
        dataValueField:itemValue,
        dataTextField: itemText,
        value:selectedId,
        template: template,
        change:onChange}" />

JavaScript的：

width:ko.observable('100px')

当我的宽度尚未绑定时，它运作良好。 这是我之前的HTML代码：

<input style="width:100 
      id=" kendoCombo " 
      data-bind=" value: '444',
      kendoDropDownList: { dataSource: data,      
                           dataValueField:itemValue,
                           dataTextField: itemText,
                           value:selectedId, 
                           template: template,
                           change:onChange} " />

Answer 1

问题是Kendo在初始化时只设置DropDownList的width一次，因此当Knockout更新样式绑定中的width ，它对DropDownList没有影响。

但是你可以设置width在wrapper性质（要求：2013年第一季度（2013.1.319或版本）更新版本）中的kendoDropDownList ，你可以把这个逻辑到自定义bindingHandler：

ko.bindingHandlers.kendoDropDownListWidth = {
    update: function (element, valueAccessor) {
        var dropdownlist = $(element).data("kendoDropDownList");
        dropdownlist.wrapper[0].style["width"] = 
            ko.utils.unwrapObservable(valueAccessor());
    }
};

并像这样使用它：

<input id="kendoCombo" data-bind=" value:'444', 
        kendoDropDownListWidth: width,
        kendoDropDownList: { dataSource: data,
        dataValueField:itemValue,
        dataTextField: itemText,
        value:selectedId,
        template: template,
        change:onChange}" />

演示JSFiddle 。