使用敲出來為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 。