複数のjsファイルでsemantic-ui-calendarを複数回使用するように設定する

Question

webpackを使用してフロントエンドをコンパイルするDjangoアプリがあります。フロントエンドライブラリとして私はsemantic-uiを使用しています。最近別モジュールsemantic-ui-calendarをインストールしました。

正常に動作しています。必要なjsファイルでは、私は書くことができます

$('#event_starts_at_1').calendar({ 
     minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), today.getMinutes()), 
     monthFirst: false, 
    }); 

これは、カレンダーコンポーネントを起動します。

ui-calendarコンポーネントは、私が使用する多くのオプションを使用します。また、ui-calendarが埋め込まれる複数のページがあります。

それぞれのjsファイルでui-calendar初期化を同じコードで繰り返し、コンポーネント内で一度だけ解決するソリューションを探したいとは思わない。

私にとっては、問題はあまり補完されていないようですが、jsとwebpackで解決する方法を理解できません。おそらくあなたはui-calendarをサブクラス化するか、それを一度しかセットアップしない何らかのスニペットを提供することができます。ありがとう！

Answer 1

私はあなたがJQueryを使用していることが分かります。ここで提案します。これを行う方法はいくつかありますが、これは1つの方法にすぎません。

あなた自身のjavascriptで各要素を初期化したくない場合は、質問にあなたの例を書いたように、いつでもそれを抽象化することができます。

すべてのカレンダー要素にsemantic-calendarのようなクラス名を付けることを検討できます。 false後の最後のコンマは削除されたことを

$(document).ready(function() { 
    $('.semantic-calendar').each(function(){ 
     $(this).calendar({ 
      minDate: new Date(today.getFullYear(), today.getMonth(), 
       today.getDate(), today.getHours(), today.getMinutes()), 
      monthFirst: false 
     }); 
    }); 
}); 

注：その後、文書レディ機能を使用して、JavaScriptのファイルにし、foreachループ指定されたクラスを持つすべての要素を初期化します。それは最後の要素であるので、そこにはいけません。

このjavascriptスニペットは、カレンダーjs自体に含まれている可能性があります。また、別個のファイル、または既存のカスタムjavascriptユーティリティー・コレクションとして組み込むこともできます。

必要に応じて、ドキュメント対応のラッパーをスキップして、コードを関数内に置くことができます。そうすれば、初期化が行われたときに、DOMがロードされたときに自動的に起こるのではなく、関数を呼び出すことで自分自身を決めることができます。