1

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!!

Community
  • 1
  • 1
comixninja
  • 748
  • 6
  • 17

1 Answers1

2

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'],
        }
 }
RP Niemeyer
  • 114,592
  • 18
  • 291
  • 211
  • Thanks Niemeyer, however jQuery is definitely loaded. I checked, double checked and verified, that's unfortunately not the issue. :/ – comixninja Sep 05 '13 at 21:49
  • I still believe that this is your issue. I set a breakpoint on your live site and confirmed it. You could use the shim config (http://requirejs.org/docs/api.html#config-shim) as I had mentioned. Otherwise, you could use a slight tweak to the binding to use jQuery to listen to the event like: http://jsfiddle.net/rniemeyer/emYGL/ – RP Niemeyer Sep 06 '13 at 01:34
  • Your jQuery event suggestion worked like a charm, thank you sir! – comixninja Sep 06 '13 at 02:09