referencing an Id created in a knockout component

Question

I made a small fiddle demonstrating my issue here http://jsfiddle.net/LkqTU/33025/

the datepicker made using a component does not fire

below is my original post...

I am using the bootstrap 3 date time picker and it is working as follows.

html

<div data-bind="css: formControlCss">
                                                 <label class="control-label" for="earlyPickup">Early Pickup:</label>  
                                                   <div class='input-group date' id='earlyPickup'>
                                                     <input type='text' class="form-control" />
                                                     <span class="input-group-addon">
                                                        <span class="glyphicon glyphicon-calendar"></span>
                                                     </span>
                                                   </div>
                                            </div>

javascript.

 $('#earlyPickup').datetimepicker(
                                  {
                                   defaultDate: d.DB2VXRVSMRecord.DtErlstPickup + " " + d.DB2VXRVSMRecord.TiErlstPickup
                                  });

this works fine however I have several of these date time pickers so I attempted to create a knockout component.

component.

 ko.components.register('datetime-picker', {
            viewModel: function (params) {
                this.label = params.label
                this.id = params.id
                this.hasError = params.hasError
                this.formControl = ko.pureComputed(function () {
                    return (this.hasError()) ? "form-group has-error" : "form-group";
                }, this);
            },
            template:
               '<div data-bind="css: formControl">\
                 <label class="control-label" \
                 data-bind ="attr: {for: id}"> \
                  <span data-bind="text: label"></span>:</label>\
                  <div class="input-group date"\
                  data-bind= "attr: {id: id}" >\
                      <input type="text" class="form-control" />\
                         <span class="input-group-addon">\
                              <span class="glyphicon glyphicon-calendar"></span>\
                         </span>\
                   </div>\
                 </div>'
        });

and I changed my HTML to.

<datetime-picker
                                         params="label: 'Early Pickup', 
                                         id: 'earlyPickup',
                                         hasError: ErlstPickupHasErrors">
                                      </datetime-picker>

unfortunately my date time picker is no longer instantiated. I am assuming because since I am now using a component I can not refer to id directly? when calling the date time picker $('#earlyPickup').datetimepicker( does it not know what earlyPickup is at this point?

Answer 1

The problem is that components are loaded asynchronously. Your components may or may not have been rendered on the page by the time you try to attach the date picker. Additionally, an id is required for the picker to work. So you'll have to wait til the components are rendered, and the bindings are applied.

One way you could tackle this is to add a preprocessNode handler to inspect the nodes as they are traversed. You could then determine whether a node needs to have the picker attached to it. Then attach the picker if an id is set, otherwise retry some amount of times.

e.g.,

ko.components.register('form-input', {
  viewModel: function(params) {
    this.inputValue = params.value;
    this.label = params.label;
    this.id = params.id;
  },
  template: '<div class ="form-group">\
    <label class="control-label col-sm-2" \
           data-bind ="attr: {for: id}"> \
      <span data-bind="text: label"></span>:\
    </label>\
    <div class="col-sm-9">\
      <input type="text"\
             class="form-control datepicker"\
             data-bind="textInput: inputValue, attr: {id: id}"/>\
    </div>\
  </div>'
});

ko.bindingProvider.instance.preprocessNode = function (node) {
  if (node.nodeType == 1) {
    if ($(node).hasClass('datepicker')) {
      if (node.id) { // an id is required
        attachDatepicker(node);
      } else {
        retryAttachDatepicker(node, 3);
      }
    }
  }

  function attachDatepicker(node) {
    $(node).datepicker();
    ko.utils.domNodeDisposal.addDisposeCallback(node, function () {
      $(node).datepicker('destroy');
    });
  }

  // would be easier to use a microtask but this is pre 3.4
  function retryAttachDatepicker(node, tries) {
    if (tries > 0) {
      setTimeout(function () {
        if (node.id) {
          attachDatepicker(node);
        } else {
          retryAttachDatepicker(node, tries - 1)
        }
      }, 10);
    } else {
      console.warn('unable to attach datepicker to node %o', node);
    }
  }
};

fiddle