Question

我正在使用此处找到的解决方案：

jQuery UI datepicker change event not caught by KnockoutJS

我在页面上有许多datepicker控件。当一个更改时，更改事件将触发所有这些更改。

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

Answer 1

好的 - 找到了答案。当我退后一步并在StackOverflow上重新查看它时非常明显（我正在配对 - 所以我们都错过了它）。

更新功能是对datepicker的更新，而不是特定元素。我需要的是以下内容：

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


}
};

所有Jquery UI DatePicker和KnockoutJS Change事件都会触发

1 个答案: