Component

Inherit:HTMLElement

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

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

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

Type:Boolean Default:true

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

Type:Boolean Default:true

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

Type:Boolean Default:true

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

Type:Boolean Default:true

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

Type:Boolean Default:true

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

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.

Type:String Default:<Class Name>

Specifies the component name.

Type:String Default:<tag name>

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

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.

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

Triggered after doFetch event.

Triggered after doRefresh event.

Triggered after doSetup event.

Triggered during the latter stage of a component initialization.

None

Triggered after doStop event.

Triggered when fetch() method is called.

Triggered when refresh() method is called.

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.

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.

None

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.

Triggered after beforeFetch event.

Triggered after doTarget event.

Triggered after beforeSetup event.

Triggered after beforeStart event.

None

Triggered after beforeStop event.

Triggered after beforeRefresh event.

Type:String Default:<Class Name> get

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

Type:HTMLElement Default:this get

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

Type:String get

Returns the automatically created unique id assigned to each component.

Type:undefined

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

undefined

Type:undefined Asynchronous

Fetches data.

undefined

• afterFetch
• beforeFetch
• doFetch

• doFetch

Type:undefined

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

undefined

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.

undefined

• afterRefresh
• beforeRefresh
• doRefresh
• doTarget

• settings.autoFetch
• settings.autoFill

Type:NodeList

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

Node list of HTML elements.

Type:undefined Asynchronous

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

undefined

• afterSetup
• beforeSetup
• doSetup

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.

undefined

• afterStart
• beforeStart

• afterStart
• beforeStart

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

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.

undefined

• afterStop
• beforeStop
• doStop

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.

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.

undefined

• afterAppend

• afterAppend

• settings.autoSetup