Question

我正在尝试自定义和扩展datepicker。首先，我通过customValue扩展了Binder：

kendo.data.binders.widget.customValue = kendo.data.Binder.extend({
    init: function (element, bindings, options) {
        kendo.data.Binder.fn.init.call(this, element, bindings, options);
    },

    refresh: function(e){
        var path = this.bindings.customValue.path,
            source = this.bindings.customValue.source,
            value = source.get(path);

        this.element.value(value);
    },

    change: function(e){
        // this method is not triggered 
        debugger;
    }
});

然后我扩展了DatePicker小部件：

CustomDatePicker = kendo.ui.DatePicker.extend({
    init: function(element, options) {
        kendo.ui.DatePicker.prototype.init.call(this, element, options);

        this.bind('change', this.onChange);
    },

    options: {           
        name: "CustomDatePicker",
    },

    onChange: function(e){
        debugger;
    },
});

kendo.ui.plugin(CustomDatePicker);

当视图模型更改时，将触发自定义绑定器的方法“刷新”，因此数据可以从视图模型流向窗口小部件。它运作良好。但是我从小部件到视图模型（反向流）的绑定存在问题。起初我认为datepicker中的更改会在'customValue'活页夹中触发'更改'方法，但事实并非如此。触发了CustomDatePicker.onChange方法，但在其中，视图模型超出了范围，因此无法设置视图模型。我的问题是，当窗口小部件的值发生变化时，如何更新视图模型？感谢您的建议。

仅用于插图窗口小部件，如下所示：

<input
     data-role="datepickercustom"
     data-bind="customValue: data"
     data-format="dd.MM.yyyy" />

Answer 1

Kendo不会自动设置对绑定中的更改功能的调用。您需要自己将更改函数绑定到窗口小部件的更改事件。

select ParcelID
      ,LTRIM(
         ISNULL(' ' + AddNum , '') 
       + ISNULL(' ' + AddDir , '')  
       + ' ' + AddStreet 
       + ISNULL(' ' + AddUnitNum, '') 
       + ' ' + AddCity + ', ' + AddState + ' ' 
       + AddZip 
       + ISNULL('-'+ AddZip4, '')
       ) as Address
from PropertyParameters
where AddZip = '#URL.zip#

请务必遵循窗口小部件绑定模式（窗口小部件，绑定，选项）（元素，绑定，选项）。

除非您需要实现与更新视图模型分开的其他行为，否则您似乎无需扩展DatePicker小部件。

自定义Kendo小部件不会更新viewModel

1 个答案: