javascript - 对 kendo-ui 输入 wrraper 的宽度使用 knockout

Question

我在 durandal 元素工作(其中 javascript 和 html 编写在不同的页面中)。我有 kendo-combo，我通过声明 wrraper-input 宽度来给它宽度。它运作良好。但是当我将其更改为绑定(bind)时 - 它不起作用。这是我的代码(不起作用):

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')

当我的width还没有绑定(bind)的时候，效果很好。这是我以前的 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时样式绑定(bind)它对 DropDownList 没有影响。

但是，您可以在 kendoDropDownList 的 wrapper 属性(要求:2013 年第一季度(版本 2013.1.319)或更新版本)上设置 width您可以将此逻辑放入自定义绑定(bind)处理程序中:

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 .