HTMLページのFramework7カレンダーを実装する

Question

HTMLページにframework7カレンダーを追加しようとしていますが、表示されません。何が問題なの？

私のHTMLコード：

<div class="content-block-title">Default setup</div> 
    <div class="list-block"> 
     <ul> 
      <li> 
       <div class="item-content"> 
        <div class="item-inner"> 
         <div class="item-input"> 
          <input type="text" placeholder="Your birth date" readonly id="calendar-default" /> 
         </div> 
        </div> 
       </div> 
      </li> 
     </ul> 
    </div>   

私のjsのコード

var myApp = new Framework7(); 
var calendarDefault = myApp.calendar({ 
input: '#calendar-default', 
}); 

Answer 1

問題は、DOMの準備ができて、まだ、具体的には '＃カレンダー、デフォルトの' input要素ではないのかもしれ。それはそれはあなたの問題だより「NULL」印刷した場合

console.log(document.getElementById('calendar-default')); 

：それはあなたがカレンダーを初期化する直前に、このラインを使用して問題かどうかを確認することができます。

解決策は、状況によって異なります。あなたはDom7（Framework7の一部）を使用してDOMContentLoadedイベントを聞くことによってそれを解決することができます：あなたはcustom elementsまたはクライアント側のMV-のいくつかの並べ替えとそれを使用している場合

$$(document).on('DOMContentLoaded', function() { 
    var calendarDefault = myApp.calendar({ 
     input: '#calendar-default', 
    }); 
}); 

*初期化ロジックをする必要があるかもしれませんフレームワーク（私はAureliaを使用していて、日付ピッカーcustom componentを作成しようとするとこの問題が発生しました）。