Question

I am using the solution found here:

jQuery UI datepicker change event not caught by KnockoutJS

I have a number of datepicker controls on the page. When one changes, the change event fires for all of them.

RefreshData is a custom function that refreshes data in the ViewModel when the date range is changed.

What am I missing – its been a very frustrating afternoon trying to get this working properly

Here is my knockout binding:

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

OK – found the answer. Really obvious when I took a step back and re-looked at it on StackOverflow (and I was pairing on this – so we both missed it).

The update function is an update on the datepicker, not a specific element. What I needed is the following:

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


}
};