Bitsmist Frameworks
Docs » Component

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>,
    },
}

autoFetch

型:Boolean デフォルト:true

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

autoFill

型:Boolean デフォルト:true

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

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クラスを使って実装されています。

  • リファレンス - ストア - ChainableStore

イベント

afterAppend

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

パラメータ

パラメータ型説明
optionsObjectswitchTemplate()メソッドに渡されたoptions引数です。

afterFetch

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

パラメータ

パラメータ型説明
optionsObjectfetch()メソッドに渡されたoptions引数です。

afterRefresh

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

パラメータ

パラメータ型説明
optionsObjectrefresh()メソッドに渡されたoptions引数です。

afterSetup

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

パラメータ

パラメータ型説明
optionsObjectsetup()メソッドに渡されたoptions引数です。

afterStart

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

パラメータ

パラメータ型説明
optionsObjectstart()メソッドに渡されたoptions引数です。

afterStop

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

パラメータ

パラメータ型説明
optionsObjectstop()メソッドに渡されたoptions引数です。

beforeFetch

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

パラメータ

パラメータ型説明
optionsObjectfetch()メソッドに渡されたoptions引数です。

beforeRefresh

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

パラメータ

パラメータ型説明
optionsObjectrefresh()メソッドに渡されたoptions引数です。

beforeSetup

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

パラメータ

パラメータ型説明
optionsObjectsetup()メソッドに渡されたoptions引数です。

beforeStart

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

パラメータ

なし。

beforeStop

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

パラメータ

パラメータ型説明
optionsObjectstop()メソッドに渡されたoptions引数です。

doFetch

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

パラメータ

パラメータ型説明
optionsObjectfetch()メソッドに渡されたoptions引数です。

doRefresh

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

パラメータ

パラメータ型説明
optionsObjectrefresh()メソッドに渡されたoptions引数です。

doSetup

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

パラメータ

パラメータ型説明
optionsObjectsetup()メソッドに渡されたoptions引数です。

doStart

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

パラメータ

なし。

doStop

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

パラメータ

パラメータ型説明
optionsObjectstop()メソッドに渡されたoptions引数です。

doTarget

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

パラメータ

パラメータ型説明
optionsObjectrefresh()メソッドに渡されたoptions引数です。

プロパティ

name

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

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

rootElement

型:HTMLElement デフォルト:this get

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

uniqueId

型:String get

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

メソッド

clear(options)

型:undefined

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

パラメータ

パラメータ型説明
optionsObject設定情報です。

戻り値

なし。

fetch(options)

型:undefined 非同期

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

パラメータ

パラメータ型説明
optionsObject設定情報です。トリガするイベントにオプションとして渡されます。

戻り値

なし。

イベント

  • afterFetch
  • beforeFetch
  • doFetch

オーガナイザイベント

  • doFetch

fill(options)

型:undefined

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

パラメータ

パラメータ型説明
optionsObject設定情報です。

戻り値

なし。

refresh(options)

型:undefined 非同期

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

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

これはTemplateOrganizerのshowConditionalElements()拡張メソッドを呼び出すことで、行われます。

  • リファレンス - オーガナイザ - TemplateOrganizer.showConditionalElements()

パラメータ

パラメータ型説明
optionsObject設定情報です。トリガするイベントにオプションとして渡されます。

戻り値

なし。

イベント

  • afterRefresh
  • beforeRefresh
  • doRefresh
  • doTarget

参照する設定

  • settings.autoFetch
  • settings.autoFill

scopedSelectorAll(query)

型:NodeList

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

パラメータ

パラメータ型説明
query
必須
String検索クエリーです。document.querySelectorAll()と同じ書式を使います。

戻り値

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

setup(options)

型:undefined 非同期

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

パラメータ

パラメータ型説明
optionsObject設定情報です。トリガするイベントにオプションとして渡されます。

戻り値

なし。

イベント

  • afterSetup
  • beforeSetup
  • doSetup

start(settings)

型:undefined 非同期

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

パラメータ

パラメータ型説明
settingsObject設定情報です。

戻り値

なし。

イベント

  • afterStart
  • beforeStart

オーガナイザイベント

  • afterStart
  • beforeStart

参照する設定

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

stop(options)

型:undefined 非同期

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

パラメータ

パラメータ型説明
optionsObject設定情報です。トリガするイベントにオプションとして渡されます。

戻り値

なし。

イベント

  • beforeStop
  • doStop
  • afterStop

switchTemplate(templateName, options)

型:undefined 非同期

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

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

これはTemplateOrganizerのhideConditionalElements()拡張メソッドを呼び出すことで行われます。

  • リファレンス - オーガナイザ - TemplateOrganizer.hideConditionalElements()

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

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

パラメータ

パラメータ型説明
templateName
必須
String切り替え先のテンプレート名です。
optionsObject設定情報です。トリガするイベントにオプションとして渡されます。

戻り値

なし。

イベント

  • afterAppend

オーガナイザイベント

  • afterAppend

参照する設定

  • settings.autoSetup
Previous Next

© 2019-2023 Masaki Yasutake

Bitsmist Frameworks

Table of Contents

Table of Contents

  • Component
    • 概要
    • 設定
      • autoFetch
      • autoFill
      • autoRefresh
      • autoSetup
      • autoStop
      • hasTemplate
      • name
      • templateName
      • useGlobalSettings
    • イベント
      • afterAppend
      • afterFetch
      • afterRefresh
      • afterSetup
      • afterStart
      • afterStop
      • beforeFetch
      • beforeRefresh
      • beforeSetup
      • beforeStart
      • beforeStop
      • doFetch
      • doRefresh
      • doSetup
      • doStart
      • doStop
      • doTarget
    • プロパティ
      • name
      • rootElement
      • uniqueId
    • メソッド
      • clear(options)
      • fetch(options)
      • fill(options)
      • refresh(options)
      • scopedSelectorAll(query)
      • setup(options)
      • start(settings)
      • stop(options)
      • switchTemplate(templateName, options)

全般

  • 概要
  • インストール
  • サンプルコンポーネントを作る

コンポーネントについて

  • ロード
  • 設定
  • イベント
  • オーガナイザによる拡張

リファレンス - コンポーネント

  • Component

リファレンス - オーガナイザ

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

リファレンス - ストア

  • Store
  • ChainableStore

リファレンス - ユーティリティ

  • AjaxUtil
  • ClassUtil
  • Util