複数の動的Datetimepickerが直接開かない

Question

ボタンクリックによる複数のブートストラップdatetimepickerを動的に追加したフォームがあります。彼らはすべて同じクラスを持っているので、誰もが開くことができます。

問題は、ピッカーが開く前に複数回クリックする必要があります...もし私が1つを開くと、ピッカーの他の日付がリセットされますか？

すべてのdatetimepickerを個別に初期化する必要がありますか？はいの場合は、クリックまたはonRendered Templateヘルパーで？

HERESに私のJS：

'click .openDatetimepicker': function(event) { 
    $('.speakerDatetimepicker').datetimepicker({ 
     format: 'L LT', 
     widgetPositioning: { 
      horizontal: 'left', 
      vertical: 'bottom' 
     }, 
     locale: 'de' 
    }); 
} 

とHTML

{{#each speakerDates}} 
    <div class="row"> 
     <div class="one wide column"></div> 
     <div class="ten wide column"> 
      <div class="inline fields"> 
       <div class="four wide field"> 
       <label class="ui orange small header">{{incremented @index}}. Offtext-Termin</label> 
       </div> 
       <div class="six wide field"> 
        <div class="form-group"> 
         <div class='input-group date speakerDatetimepicker'> 
          <input type="hidden" name="speakerDateID" value="{{this._id}}"> 
          <input id="speakerDate{{@index}}" type='text' class="form-control" value="{{start}}" size="14px"/> 
          <span class="input-group-addon"> 
           <span class="glyphicon glyphicon-calendar openDatetimepicker"></span> 
          </span> 
         </div> 
        </div> 
       </div> 
       <div class="one wide field"> 
        <button class="ui red medium removeSpeakerDate button" value="{{_id}}"> 
         <i class="minus icon"></i> 
        </button> 
       </div> 
      </div> 
      </div> 
     </div> 
{{/each}} 

は、あなたが私を助けることを願って： - /おかげ

Answer 1

はい、あなたはonRendered内のDateTimePickerと、他のjQueryのプラグインを初期化する必要があります。また、それは別のテンプレートに感覚移動リスト項目を行います

<template name="List"> 
{{#each speakerDates}} 
    {{> ListItem}} 
{{/each}} 
</template> 

<template name='ListItem'> 
    <div class="row"> 
     <div class="one wide column"></div> 
     <div class="ten wide column"> 
      <div class="inline fields"> 
       <div class="four wide field"> 
       <label class="ui orange small header">{{incremented @index}}. Offtext-Termin</label> 
       </div> 
       <div class="six wide field"> 
        <div class="form-group"> 
         <div class='input-group date speakerDatetimepicker'> 
          <input type="hidden" name="speakerDateID" value="{{this._id}}"> 
          <input id="speakerDate{{@index}}" type='text' class="form-control" value="{{start}}" size="14px"/> 
          <span class="input-group-addon"> 
           <span class="glyphicon glyphicon-calendar openDatetimepicker"></span> 
          </span> 
         </div> 
        </div> 
       </div> 
       <div class="one wide field"> 
        <button class="ui red medium removeSpeakerDate button" value="{{_id}}"> 
         <i class="minus icon"></i> 
        </button> 
       </div> 
      </div> 
      </div> 
     </div> 
</template> 

そして、JS：

Template.ListItem.onRendered(function(){ 
// notice this before $: we initializing datetime picker 
// only inside current list item template. 
    this.$('.speakerDatetimepicker').datetimepicker({ 
     format: 'L LT', 
     widgetPositioning: { 
      horizontal: 'left', 
      vertical: 'bottom' 
     }, 
     locale: 'de' 
    }); 
});