Component

継承:HTMLElement

BitsmistJSの核となるコンポーネントオブジェクトです。HTMLElementを継承しているため、通常のHTML要素の機能を引き継いでいます。自分のコンポーネントを作成する場合は、このComponentを継承して作成します。

Componentはデフォルトで以下のオーガナイザをアタッチしています。

• OrganizerOrganizer
• SettingOrganizer
• StateOrganizer
• EventOrganizer
• LoaderOrganizer
• TemplateOrganizer

Componentの設定は“settings”セクションに記述します。

{
    "settings": {
        "autoFetch": <autoFetch>,
        "autoFill": <autoFill>,
        "autoRefresh": <autoRefresh>,
        "autoRestart": <autoRestart>,
        "autoSetup": <autoSetup>,
        "autoStop": <autoStop>,
        "hasTemplate": <hasTemplate>,
        "name": <name>,
        "templateName": <templateName>,
        "useGlobalSettings": <useGlobalSettings>,
    },
}

型:Boolean デフォルト:true

Trueの場合、refresh()メソッドを呼ぶと自動的にfetch()メソッドも呼び出されます。

型:Boolean デフォルト:true

Trueの場合、refresh()メソッドを呼ぶと自動的にfill()メソッドも呼び出されます。

型:Boolean デフォルト:true

Trueの場合、初期化終了時に自動的にrefresh()メソッドが呼び出されます。

型:Boolean デフォルト:true

Trueの場合、自動的にsetup()メソッドが呼び出されます。

型:Boolean デフォルト:true

Trueの場合、コンポーネントがドキュメントツリーから切り離された際に、stop()メソッドを実行します。

型:Boolean デフォルト:true

コンポーネントがテンプレートHTMLを持つかを指定します。Trueの場合、初期化の途中で自動的にswitchTemplate()が呼び出され、テンプレートHTMLの読み込みと差し込みが行われます。

型:String デフォルト:<クラス名>

コンポーネント名を指定します。

型:String デフォルト:<タグ名>

テンプレートファイル名を拡張子なしで指定します。ファイル取得時に拡張子“.html”を追加したファイル名を取得します。

型:Boolean デフォルト:true

グローバル設定をコンポーネントに反映させるかを指定します。Trueの場合、コンポーネントの設定がグローバル設定に連結されます。

switchTemplate()メソッドが呼ばれ、テンプレートHTMLがコンポーネントにアタッチされた後に発生します。

doFetchイベントの後に発生します。

doRefreshイベントの後に発生します。

doSetupイベントの後に発生します。

コンポーネントの初期化処理の終了付近で発生します。

doStopイベントの後に発生します。

fetch()メソッドが呼ばれた際に発生します。

refresh()メソッドが呼ばれた際に発生します。

setup()メソッドが呼びされた際に発生します。デフォルトでは初期化中にsetup()メソッドが自動的に呼び出されます。コンポーネントがテンプレートHTMLを持っている場合、テンプレートHTMLがノードにアタッチされた後に発生します。

start()メソッドが呼び出された時に発生します。コンポーネントがドキュメントツリーにアタッチされた時（connectedCallbackイベント発生時）にstart()メソッドが自動的に呼び出されます。

なし。

stop()メソッドが呼び出された時に発生します。デフォルトではコンポーネントがドキュメントツリーから切り離された時（disconnectedCallback発生時）にstop()メソッドが自動的に呼び出されます。

beforeFetchイベントの後に発生します。

doTargetイベントの後に発生します。

beforeSetupイベントの後に発生します。

beforeStartイベントの後に発生します。

なし。

beforeStopイベントの後に発生します。

beforeRefreshイベントの後に発生します。

型:String デフォルト:<クラス名> get

コンポーネントの名前です。設定の"settings.name"で指定可能です。

型:HTMLElement デフォルト:this get

コンポーネントのルートとなるHTML要素です。通常は“this”と同じです。

型:String get

コンポーネントのインスタンスごとに割り当てられるユニークなIDです。自動的に生成されます。

型:undefined

このコンポーネントをクリアします。実際にはこのベースクラスでは何もしないため、オーバーライドする必要があります。

なし。

型:undefined 非同期

コンポーネントに必要なデータを取得します。

なし。

• afterFetch
• beforeFetch
• doFetch

• doFetch

型:undefined

コンポーネントに値を埋め込みます。 実際にはこのベースクラスでは何もしないため、オーバーライドする必要があります。

なし。

型:undefined 非同期

コンポーネントを再描画します。"settings.autoFetch"オプションがTrueの場合はfetch()メソッドを、"settings.autoFill"オプションがTrueの場合はfill()メソッドを自動的に呼び出します。

条件付要素（“bm-visible”属性を持つ要素）は条件に合致すれば、このタイミングで表示されます。

なし。

• afterRefresh
• beforeRefresh
• doRefresh
• doTarget

• settings.autoFetch
• settings.autoFill

型:NodeList

自身の配下にある、指定されたクエリーに合致するHTML要素を返します。

クエリーに合致するHTML要素のNodeListです。

型:undefined 非同期

コンポーネントをセットアップします。設定を変更した場合などに呼び出します。

なし。

• afterSetup
• beforeSetup
• doSetup

型:undefined 非同期

コンポーネントの初期化を開始します。タグがインスタンス化されるときに自動的に呼び出されるため、通常は呼び出す必要はありません。

なし。

• afterStart
• beforeStart

• afterStart
• beforeStart

• settings.autoMorph
• settings.autoPostStart
• settings.autoRefresh
• settings.autoSetup
• settings.hasTemplate
• settings.name
• settings.rootElement

型:undefined 非同期

コンポーネントの終了処理を行います。タグが切り離された時に自動的に呼び出されるため、通常は呼び出す必要はありません。

なし。

• beforeStop
• doStop
• afterStop

型:undefined 非同期

テンプレートHTMLを切り替えます。HTMLファイルがまだロードされてない場合は、自動的にロードされます。ロードされたHTMLファイルは自身にアタッチされます。追加された後、テンプレート内にオートロードの必要があるタグがある場合は、さらにそれらをロードします。

テンプレートHTMLがアタッチされた際、bm-visible属性をもつ要素は、全て一旦非表示になります。

非表示になった要素は画面の再描画時（refresh()メソッドが呼ばれた時）に、条件に応じて表示されます。

"settings.autoSetup"オプションがTrueの場合、テンプレートHTMLのアタッチ後にsetup()メソッドを呼び出します。

なし。

• afterAppend

• afterAppend

• settings.autoSetup