所有 Jquery UI DatePicker 和 KnockoutJS Change 事件都在一个事件中触发答案

【问题标题】：All Jquery UI DatePicker and KnockoutJS Change event on one fires for all所有 Jquery UI DatePicker 和 KnockoutJS Change 事件都在一个事件中触发
【发布时间】：2012-10-31 20:59:36
【问题描述】：

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

jQuery UI datepicker change event not caught by KnockoutJS

我在页面上有许多日期选择器控件。当其中一个发生更改时，所有这些更改事件都会触发。

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

【问题讨论】：

你能不能把一个 jsfiddle 放在一起来重现你的问题？
刚刚看到一些有趣的东西——当第一个数据选择器改变时，更新触发一次。当第二个日期选择器更改时，更新触发两次
为什么需要RefreshData？你能提供这个函数的主体吗？

标签： knockout.js jquery-ui-datepicker

【解决方案1】：

好的 - 找到了答案。当我退后一步并在 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);
    }


}
};

【讨论】：