自定义 Kendo 小部件不更新 viewModel答案

【问题标题】：Custom Kendo widget doesn't update viewModel自定义 Kendo 小部件不更新 viewModel
【发布时间】：2015-04-22 09:32:21
【问题描述】：

我正在尝试自定义和扩展日期选择器。首先我通过 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' 活页夹中的 'change' 方法，但事实并非如此。触发了 CustomDatePicker.onChange 方法，但其中的视图模型超出了范围，因此无法设置视图模型。我的问题是，当小部件的值发生变化时，如何更新视图模型？感谢您的建议。

仅用于插图小部件的初始化如下：

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

【问题讨论】：

标签： data-binding kendo-ui kendo-mvvm kendo-datepicker

【解决方案1】：

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

kendo.data.binders.widget.customValue = kendo.data.Binder.extend({
   init: function (widget, bindings, options) {
       kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
        var that = this;
        $(widget.element).on('change', function () {
            that.change();
        });
    },

    .
    .
    .

    change: function() {
        // this method will now be triggered 
        debugger;
    }
});

请务必遵循小部件绑定模式（小部件、绑定、选项）而不是（元素、绑定、选项）。

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

【讨论】：