ndcomix ndcomix - 2 months ago 33
Javascript Question

knockoutJS, requireJS, and jQueryUI Datepicker not playing nice together

I'm attempting to create a custom knockoutJS binding with the jquery-ui Datepicker like this:
http://jsfiddle.net/rniemeyer/X82aC/
jQuery UI datepicker change event not caught by KnockoutJS

I'm having no luck after implementing requireJS though, which I tried modeling after both examples in this documentation: (currently using the latter of the examples)
http://knockoutjs.com/documentation/amd-loading.html

There are no errors, however my observable Dates are not being updated after the Datepicker selection is made. Here's a live URL example (try the 'Start Date' input at the top left corner) :
http://www.nealgist.com/stackoverflow/reporting_0_4_3

define(['plugins/knockout','datepicker'], function(ko) {
return function appViewModel(){
...
this.startDate = ko.observable(new Date());
}
}

define(['plugins/knockout'], function(ko) {
ko.bindingHandlers.datePicker = { ... }
}


index.html:

<input type="text" data-bind="datepicker:$root.startDate" />


I could really use some help if you have any ideas, thank you in advance!!

Answer

My best guess is that jQuery has not been loaded prior to Knockout. If jQuery is available when KO initially loads, then Knockout will use it for event binding. If other libraries are using jQuery to trigger events, but KO does not use jQuery to bind to events, then the handlers will not be executed.

So, you would want to ensure that jQuery is loaded first. If you have to, you can add this to your config:

 shim: {
        'knockout': {
            deps: [ 'jquery'],
        }
 }