Bitsmist Frameworks
Docs » Component

Component

Inherit:HTMLElement

Overview

The Component is a core component of the BitsmistJS library. It inherits HTMLElement and can be used just like usual HTML elements in HTML. It is a base component to inherit for your own custom component.

The Component class attaches organizers below by default.

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

Settings

The component's settings are placed in the “settings” section.

Syntax:

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

autoFetch

Type:Boolean Default:true

When set to True, fetch() method will be called automatically inside refresh() method.

autoFill

Type:Boolean Default:true

When set to True, fill() method will be called automatically inside refresh() method.

autoRefresh

Type:Boolean Default:true

When set to True, refresh() method will be called automatically after initialization is finished.

autoSetup

Type:Boolean Default:true

When set to True, setup() method will be called automatically in the initialization process.

autoStop

Type:Boolean Default:true

When set to True, stop() method will be called when the component is detached from the document tree.

hasTemplate

Type:Boolean Default:true

Specifies whether the component has template HTML files. When set to True, switchTemplate() method will be called in the initialization process to load and insert template HTML in the component.

name

Type:String Default:<Class Name>

Specifies the component name.

templateName

Type:String Default:<tag name>

A template name without an extension. The extension “.html” will be appended when retrieving the template files.

useGlobalSettings

Type:Boolean Default:true

Specifies whether to apply global settings to the component. When set to True, the application global settings will be chained to the component settings.

The chain of settings is implemented by ChainableStore class.

  • Reference - Store - ChainableStore

Events

afterAppend

Triggered after a template HTML is attached to a component when switchTemplate() method is called.

Parameters

ParameterTypeDescription
optionsObjectThe options argument passed to switchTemplate() method.

afterFetch

Triggered after doFetch event.

Parameters

ParameterTypeDescription
optionsObjectThe options argument passed to fetch() method.

afterRefresh

Triggered after doRefresh event.

Parameters

ParameterTypeDescription
optionsObjectThe options argument passed to refresh() method.

afterSetup

Triggered after doSetup event.

Parameters

ParameterTypeDescription
optionsObjectThe options argument passed to setup() method.

afterStart

Triggered during the latter stage of a component initialization.

Parameters

None

afterStop

Triggered after doStop event.

Parameters

ParameterTypeDescription
optionsObjectThe options argument passed to stop() method.

beforeFetch

Triggered when fetch() method is called.

Parameters

ParameterTypeDescription
optionsObjectThe options argument passed to fetch() method.

beforeRefresh

Triggered when refresh() method is called.

Parameters

ParameterTypeDescription
optionsObjectThe options argument passed to refresh() method.

beforeSetup

Triggered when setup() method is called. By default, setup() is called automatically in the initialization process. If the component has template HTML files, the event will be triggered after the template HTML is attached to the component.

Parameters

ParameterTypeDescription
optionsObjectThe options argument passed to setup() method.

beforeStart

Triggered when start() method is called. start() method is called automatically when the component is attached to to documen tree, in other words, when native connectedCallback() is called.

Parameters

None

beforeStop

Triggered when stop() method is called. By default, stop() is called automatically when the component is detached from the document tree, in other words, when native disconnectedCallback() is called.

Parameters

ParameterTypeDescription
optionsObjectThe options argument passed to stop() method.

doFetch

Triggered after beforeFetch event.

Parameters

ParameterTypeDescription
optionsObjectThe options argument passed to fetch() method.

doRefresh

Triggered after doTarget event.

Parameters

ParameterTypeDescription
optionsObjectThe options argument passed to refresh() method.

doSetup

Triggered after beforeSetup event.

Parameters

ParameterTypeDescription
optionsObjectThe options argument passed to setup() method.

doStart

Triggered after beforeStart event.

Parameters

None

doStop

Triggered after beforeStop event.

Parameters

ParameterTypeDescription
optionsObjectThe options argument passed to stop() method.

doTarget

Triggered after beforeRefresh event.

Parameters

ParameterTypeDescription
optionsObjectThe options argument passed to refresh() method.

Properties

name

Type:String Default:<Class Name> get

Returns the component name. Can be specified in "settings.name" setting.

rootElement

Type:HTMLElement Default:this get

Returns the root node of the component. By default, it refers to “this”, the component itself.

uniqueId

Type:String get

Returns the automatically created unique id assigned to each component.

Methods

clear(options)

Type:undefined

Clears a component. It does nothing in the Component base class and you need to override this function.

Parameters

ParameterTypeDescription
optionsObjectAn object holding options.

Return Value

undefined

fetch(options)

Type:undefined Asynchronous

Fetches data.

Parameters

ParameterTypeDescription
optionsObjectAn object holding options.

Return Value

undefined

Events

  • afterFetch
  • beforeFetch
  • doFetch

Organizer Events

  • doFetch

fill(options)

Type:undefined

Fills a component with values. It does nothing in the Component base class and you need to override this function.

Parameters

ParameterTypeDescription
optionsObjectAn object holding options.

Return Value

undefined

refresh(options)

Type:undefined Asynchronous

Redraws a component. If "settings.autoFetch" option is set to True then fetch() method is called, and if "settings.autoFill" option is set to True then fill() method is called during refreshing.

Conditional elements (elements that have “bm-visible” attribute) will be shown if the condition matches.

This is done by calling TemplateOrganizer's showConditionalElements() extended method.

  • Reference - organizer - TemplateOrganizer.showConditionalElements()

Parameters

ParameterTypeDescription
optionsObjectAn object holding options.

Return Value

undefined

Events

  • afterRefresh
  • beforeRefresh
  • doRefresh
  • doTarget

Referencing Settings

  • settings.autoFetch
  • settings.autoFill

scopedSelectorAll(query)

Type:NodeList

Returns HTML elements that match the given query under the component.

Parameters

ParameterTypeDescription
query
Required
StringA search query. The query format is same as document.querySelectorAll().

Return Value

Node list of HTML elements.

setup(options)

Type:undefined Asynchronous

Sets up a component. Call it when you changed settings and apply them.

Parameters

ParameterTypeDescription
optionsObjectAn object holding options.

Return Value

undefined

Events

  • afterSetup
  • beforeSetup
  • doSetup

start(settings)

Type:undefined Asynchronous

Starts the initialization process of a component. Since it is automatically called when the tag is instantiated, you don't need to call this method explicitly.

Parameters

ParameterTypeDescription
settingsObjectAn object holding component settings.

Return Value

undefined

Events

  • afterStart
  • beforeStart

Organizer Events

  • afterStart
  • beforeStart

Referencing Settings

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

stop(options)

Type:undefined Asynchronous

Starts the terminating process of a component. Since it is automatically called when the tag is detached from the document tree, you don't need to call this method explicitly.

Parameters

ParameterTypeDescription
optionsObjectAn object holding component settings.

Return Value

undefined

Events

  • afterStop
  • beforeStop
  • doStop

switchTemplate(templateName, options)

Type:undefined Asynchronous

Switches to another HTML file to display. If the file is not loaded yet, it will be automatically loaded. The loaded file will be attached to the component, and then components inside the HTML will be loaded.

All the elements with bm-visible attributes are hidden when the template HTML is attached to the node.

This is done by calling TemplateOrganizer's hideConditionalElements() extended method.

  • Reference - organizer - TemplateOrganizer.hideConditionalElements()

Those hidden elements will be shown if the condition match when the component is refreshed (when refresh() method is called).

If "settings.autoSetup" is set to True, setup() method will be called after the template HTML file is attached to the component.

Parameters

ParameterTypeDescription
templateName
Required
StringA template name.
optionsObjectAn object holding options.

Return Value

undefined

Events

  • afterAppend

Organizer Event

  • afterAppend

Referencing Settings

  • settings.autoSetup
Previous Next

© 2019-2023 Masaki Yasutake

Bitsmist Frameworks

Table of Contents

Table of Contents

  • Component
    • Overview
    • Settings
      • autoFetch
      • autoFill
      • autoRefresh
      • autoSetup
      • autoStop
      • hasTemplate
      • name
      • templateName
      • useGlobalSettings
    • Events
      • afterAppend
      • afterFetch
      • afterRefresh
      • afterSetup
      • afterStart
      • afterStop
      • beforeFetch
      • beforeRefresh
      • beforeSetup
      • beforeStart
      • beforeStop
      • doFetch
      • doRefresh
      • doSetup
      • doStart
      • doStop
      • doTarget
    • Properties
      • name
      • rootElement
      • uniqueId
    • Methods
      • clear(options)
      • fetch(options)
      • fill(options)
      • refresh(options)
      • scopedSelectorAll(query)
      • setup(options)
      • start(settings)
      • stop(options)
      • switchTemplate(templateName, options)

GENERAL

  • Overview
  • Installation
  • Create a sample component

COMPONENT

  • Loading
  • Settings
  • Events
  • Extending with organizers

REFERENCE - COMPONENT

  • Component

REFERENCE - ORGANIZER

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

REFERENCE - STORE

  • Store
  • ChainableStore

REFERENCE - UTILITY

  • AjaxUtil
  • ClassUtil
  • Util