0

ここにあるソリューションを使用しています：

jQuery UI datepicker 変更イベントが KnockoutJS によってキャッチされない

ページに多数の日付ピッカー コントロールがあります。1 つが変更されると、すべての変更イベントが発生します。

RefreshData は、日付範囲が変更されたときに ViewModel のデータを更新するカスタム関数です。

何が欠けていますか - これを適切に機能させるために非常にイライラする午後でした

これが私のノックアウトバインディングです：

ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().datepickerOptions || {};
    $(element).datepicker(options);

    ko.utils.registerEventHandler(element, "change", function () {
        var observable = valueAccessor();
        observable($(element).datepicker("getDate"));
    });

    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).datepicker("destroy");
    });

},
update: function (element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    var current = $(element).datepicker("getDate");

    if (value - current !== 0) {
        $(element).datepicker("setDate", value);
    }

    RefreshData(element.id); //Should only fire once, but is firing for every datepicker on the page
}
};
4

1 に答える 1

-1

OK - 答えが見つかりました。私が一歩下がってStackOverflowでそれを再確認したとき、本当に明白でした（そして私はこれをペアリングしていたので、私たちは両方ともそれを見逃していました）。

更新機能は、特定の要素ではなく、日付ピッカーの更新です。私が必要としたのは次のとおりです。

ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().datepickerOptions || {};
    $(element).datepicker(options);

    ko.utils.registerEventHandler(element, "change", function () {
        var observable = valueAccessor();
        observable($(element).datepicker("getDate"));

        RefreshData(element.id); //This now fires only on the change event of the correct datepicker
    });

    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).datepicker("destroy");
    });

},
update: function (element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    var current = $(element).datepicker("getDate");

    if (value - current !== 0) {
        $(element).datepicker("setDate", value);
    }


}
};
于 2012-11-12T13:03:10.633 に答える