Component
継承:HTMLElement
概要
BitsmistJSの核となるコンポーネントオブジェクトです。HTMLElementを継承しているため、通常のHTML要素の機能を引き継いでいます。自分のコンポーネントを作成する場合は、このComponentを継承して作成します。
Componentはデフォルトで以下のオーガナイザをアタッチしています。
設定
Componentの設定は“settings”セクションに記述します。
書式:
{ "settings": { "autoFetch": <autoFetch>, "autoFill": <autoFill>, "autoRefresh": <autoRefresh>, "autoRestart": <autoRestart>, "autoSetup": <autoSetup>, "autoStop": <autoStop>, "hasTemplate": <hasTemplate>, "name": <name>, "templateName": <templateName>, "useGlobalSettings": <useGlobalSettings>, }, }
autoFetch
autoFill
autoRefresh
型:Boolean
デフォルト:true
Trueの場合、初期化終了時に自動的にrefresh()メソッドが呼び出されます。
autoSetup
型:Boolean
デフォルト:true
Trueの場合、自動的にsetup()メソッドが呼び出されます。
autoStop
型:Boolean
デフォルト:true
Trueの場合、コンポーネントがドキュメントツリーから切り離された際に、stop()メソッドを実行します。
hasTemplate
型:Boolean
デフォルト:true
コンポーネントがテンプレートHTMLを持つかを指定します。Trueの場合、初期化の途中で自動的にswitchTemplate()が呼び出され、テンプレートHTMLの読み込みと差し込みが行われます。
name
型:String
デフォルト:<クラス名>
コンポーネント名を指定します。
templateName
型:String
デフォルト:<タグ名>
テンプレートファイル名を拡張子なしで指定します。ファイル取得時に拡張子“.html”を追加したファイル名を取得します。
useGlobalSettings
型:Boolean
デフォルト:true
グローバル設定をコンポーネントに反映させるかを指定します。Trueの場合、コンポーネントの設定がグローバル設定に連結されます。
設定の連結機能は、ChainableStoreクラスを使って実装されています。
イベント
afterAppend
switchTemplate()メソッドが呼ばれ、テンプレートHTMLがコンポーネントにアタッチされた後に発生します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | switchTemplate()メソッドに渡されたoptions引数です。 |
afterFetch
doFetchイベントの後に発生します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | fetch()メソッドに渡されたoptions引数です。 |
afterRefresh
doRefreshイベントの後に発生します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | refresh()メソッドに渡されたoptions引数です。 |
afterSetup
doSetupイベントの後に発生します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | setup()メソッドに渡されたoptions引数です。 |
afterStart
コンポーネントの初期化処理の終了付近で発生します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | start()メソッドに渡されたoptions引数です。 |
afterStop
doStopイベントの後に発生します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | stop()メソッドに渡されたoptions引数です。 |
beforeFetch
fetch()メソッドが呼ばれた際に発生します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | fetch()メソッドに渡されたoptions引数です。 |
beforeRefresh
refresh()メソッドが呼ばれた際に発生します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | refresh()メソッドに渡されたoptions引数です。 |
beforeSetup
setup()メソッドが呼びされた際に発生します。デフォルトでは初期化中にsetup()メソッドが自動的に呼び出されます。コンポーネントがテンプレートHTMLを持っている場合、テンプレートHTMLがノードにアタッチされた後に発生します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | setup()メソッドに渡されたoptions引数です。 |
beforeStart
start()メソッドが呼び出された時に発生します。コンポーネントがドキュメントツリーにアタッチされた時(connectedCallbackイベント発生時)にstart()メソッドが自動的に呼び出されます。
パラメータ
なし。
beforeStop
stop()メソッドが呼び出された時に発生します。デフォルトではコンポーネントがドキュメントツリーから切り離された時(disconnectedCallback発生時)にstop()メソッドが自動的に呼び出されます。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | stop()メソッドに渡されたoptions引数です。 |
doFetch
beforeFetchイベントの後に発生します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | fetch()メソッドに渡されたoptions引数です。 |
doRefresh
doTargetイベントの後に発生します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | refresh()メソッドに渡されたoptions引数です。 |
doSetup
beforeSetupイベントの後に発生します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | setup()メソッドに渡されたoptions引数です。 |
doStart
beforeStartイベントの後に発生します。
パラメータ
なし。
doStop
beforeStopイベントの後に発生します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | stop()メソッドに渡されたoptions引数です。 |
doTarget
beforeRefreshイベントの後に発生します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | refresh()メソッドに渡されたoptions引数です。 |
プロパティ
name
型:String
デフォルト:<クラス名>
get
コンポーネントの名前です。設定の"settings.name"で指定可能です。
rootElement
型:HTMLElement
デフォルト:this
get
コンポーネントのルートとなるHTML要素です。通常は“this”と同じです。
uniqueId
型:String
get
コンポーネントのインスタンスごとに割り当てられるユニークなIDです。自動的に生成されます。
メソッド
clear(options)
型:undefined
このコンポーネントをクリアします。実際にはこのベースクラスでは何もしないため、オーバーライドする必要があります。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | 設定情報です。 |
戻り値
なし。
fetch(options)
型:undefined
非同期
コンポーネントに必要なデータを取得します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | 設定情報です。トリガするイベントにオプションとして渡されます。 |
戻り値
なし。
イベント
オーガナイザイベント
- doFetch
fill(options)
型:undefined
コンポーネントに値を埋め込みます。 実際にはこのベースクラスでは何もしないため、オーバーライドする必要があります。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | 設定情報です。 |
戻り値
なし。
refresh(options)
型:undefined
非同期
コンポーネントを再描画します。"settings.autoFetch"オプションがTrueの場合はfetch()メソッドを、"settings.autoFill"オプションがTrueの場合はfill()メソッドを自動的に呼び出します。
条件付要素(“bm-visible”属性を持つ要素)は条件に合致すれば、このタイミングで表示されます。
これはTemplateOrganizerのshowConditionalElements()拡張メソッドを呼び出すことで、行われます。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | 設定情報です。トリガするイベントにオプションとして渡されます。 |
戻り値
なし。
イベント
参照する設定
scopedSelectorAll(query)
型:NodeList
自身の配下にある、指定されたクエリーに合致するHTML要素を返します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
query 必須 | String | 検索クエリーです。document.querySelectorAll()と同じ書式を使います。 |
戻り値
クエリーに合致するHTML要素のNodeListです。
setup(options)
型:undefined
非同期
コンポーネントをセットアップします。設定を変更した場合などに呼び出します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | 設定情報です。トリガするイベントにオプションとして渡されます。 |
戻り値
なし。
イベント
start(settings)
型:undefined
非同期
コンポーネントの初期化を開始します。タグがインスタンス化されるときに自動的に呼び出されるため、通常は呼び出す必要はありません。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
settings | Object | 設定情報です。 |
戻り値
なし。
イベント
オーガナイザイベント
- afterStart
- beforeStart
参照する設定
stop(options)
型:undefined
非同期
コンポーネントの終了処理を行います。タグが切り離された時に自動的に呼び出されるため、通常は呼び出す必要はありません。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
options | Object | 設定情報です。トリガするイベントにオプションとして渡されます。 |
戻り値
なし。
イベント
switchTemplate(templateName, options)
型:undefined
非同期
テンプレートHTMLを切り替えます。HTMLファイルがまだロードされてない場合は、自動的にロードされます。ロードされたHTMLファイルは自身にアタッチされます。追加された後、テンプレート内にオートロードの必要があるタグがある場合は、さらにそれらをロードします。
テンプレートHTMLがアタッチされた際、bm-visible属性をもつ要素は、全て一旦非表示になります。
これはTemplateOrganizerのhideConditionalElements()拡張メソッドを呼び出すことで行われます。
非表示になった要素は画面の再描画時(refresh()メソッドが呼ばれた時)に、条件に応じて表示されます。
"settings.autoSetup"オプションがTrueの場合、テンプレートHTMLのアタッチ後にsetup()メソッドを呼び出します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
templateName 必須 | String | 切り替え先のテンプレート名です。 |
options | Object | 設定情報です。トリガするイベントにオプションとして渡されます。 |
戻り値
なし。
イベント
オーガナイザイベント
- afterAppend