реферирования идентификатор создан в нокауте компоненте

Question

я сделал небольшую скрипку демонстрируя мой вопрос здесь http://jsfiddle.net/LkqTU/33025/

DatePicker, сделанный с использованием компоненты не срабатывает

ниже мой оригинальный пост ...

Я использую bootstrap 3 date time picker, и он работает следующим образом.

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

это работает отлично, однако у меня есть несколько из этих временной даты сборщиков, поэтому я попытался создать компонент нокаута.

Компонент.

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

и я изменил свой HTML на.

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

К сожалению, мой сборщик времени не создан. Я предполагаю, потому что, поскольку я теперь использую компонент, я не могу напрямую ссылаться на id? при вызове выбора времени даты $('#earlyPickup').datetimepicker( не знает, что такое ранний Pickup на данный момент?

Answer 1

Проблема в том, что компоненты загружаются асинхронно. Ваши компоненты могут отображаться или не отображаться на странице к моменту попыток присоединить средство выбора даты. Кроме того, идентификатор требуется для выбора. Таким образом, вам придется ждать, пока компоненты не будут отображены, и привязки будут применены.

Одним из способов решения этой проблемы является добавление обработчика preprocessNode для проверки узлов по мере их перемещения. Затем вы можете определить, должен ли узел подключаться к нему. Затем присоедините сборщик, если установлен идентификатор, в противном случае повторите попытку несколько раз.

например,

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