一個火災所有jQuery UI的DatePicker的和KnockoutJS更改事件的所有

Question

我使用該解決方案在這裏找到：

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

Answer 1

OK - 找到了答案。真的很明顯，當我退後一步，並在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); 
    } 


} 
};