2

datepicker をカスタマイズして拡張しようとしています。まず、Binder を customValue で拡張しました。

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

カスタム バインダーのメソッド 'refresh' は、ビュー モデルが変更されるとトリガーされるため、ビュー モデルからウィジェットにデータを流すことができます。それはうまくいきます。しかし、ウィジェットからビューモデル (逆フロー) へのバインドに問題があります。最初は、datepicker の変更が「customValue」バインダーの「change」メソッドをトリガーすると思っていましたが、そうではありません。CustomDatePicker.onChange メソッドがトリガーされますが、その中で view-model がスコープ外であるため、view-model を設定できません。私の質問は、ウィジェットの値が変更されたときにビューモデルを更新する方法ですか? アドバイスありがとう。

イラストウィジェットのみが次のように初期化されます。

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

1 に答える 1

0

Kendo はバインディングで change 関数の呼び出しを自動的にセットアップしません。change 関数をウィジェットの change イベントに自分でバインドする必要があります。

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 ウィジェットを拡張する必要はないようです。

于 2015-08-30T18:48:32.110 に答える