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.
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.
Events
afterAppend
Triggered after a template HTML is attached to a component when switchTemplate() method is called.
Parameters
Parameter | Type | Description |
---|---|---|
options | Object | The options argument passed to switchTemplate() method. |
afterFetch
Triggered after doFetch event.
Parameters
Parameter | Type | Description |
---|---|---|
options | Object | The options argument passed to fetch() method. |
afterRefresh
Triggered after doRefresh event.
Parameters
Parameter | Type | Description |
---|---|---|
options | Object | The options argument passed to refresh() method. |
afterSetup
Triggered after doSetup event.
Parameters
Parameter | Type | Description |
---|---|---|
options | Object | The options argument passed to setup() method. |
afterStart
Triggered during the latter stage of a component initialization.
Parameters
None
afterStop
Triggered after doStop event.
Parameters
Parameter | Type | Description |
---|---|---|
options | Object | The options argument passed to stop() method. |
beforeFetch
Triggered when fetch() method is called.
Parameters
Parameter | Type | Description |
---|---|---|
options | Object | The options argument passed to fetch() method. |
beforeRefresh
Triggered when refresh() method is called.
Parameters
Parameter | Type | Description |
---|---|---|
options | Object | The 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
Parameter | Type | Description |
---|---|---|
options | Object | The 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
Parameter | Type | Description |
---|---|---|
options | Object | The options argument passed to stop() method. |
doFetch
Triggered after beforeFetch event.
Parameters
Parameter | Type | Description |
---|---|---|
options | Object | The options argument passed to fetch() method. |
doRefresh
Triggered after doTarget event.
Parameters
Parameter | Type | Description |
---|---|---|
options | Object | The options argument passed to refresh() method. |
doSetup
Triggered after beforeSetup event.
Parameters
Parameter | Type | Description |
---|---|---|
options | Object | The options argument passed to setup() method. |
doStart
Triggered after beforeStart event.
Parameters
None
doStop
Triggered after beforeStop event.
Parameters
Parameter | Type | Description |
---|---|---|
options | Object | The options argument passed to stop() method. |
doTarget
Triggered after beforeRefresh event.
Parameters
Parameter | Type | Description |
---|---|---|
options | Object | The 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
Parameter | Type | Description |
---|---|---|
options | Object | An object holding options. |
Return Value
undefined
fetch(options)
Type:undefined
Asynchronous
Fetches data.
Parameters
Parameter | Type | Description |
---|---|---|
options | Object | An object holding options. |
Return Value
undefined
Events
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
Parameter | Type | Description |
---|---|---|
options | Object | An 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.
Parameters
Parameter | Type | Description |
---|---|---|
options | Object | An object holding options. |
Return Value
undefined
Events
Referencing Settings
scopedSelectorAll(query)
Type:NodeList
Returns HTML elements that match the given query under the component.
Parameters
Parameter | Type | Description |
---|---|---|
query Required | String | A 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
Parameter | Type | Description |
---|---|---|
options | Object | An object holding options. |
Return Value
undefined
Events
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
Parameter | Type | Description |
---|---|---|
settings | Object | An object holding component settings. |
Return Value
undefined
Events
Organizer Events
- afterStart
- beforeStart
Referencing Settings
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
Parameter | Type | Description |
---|---|---|
options | Object | An object holding component settings. |
Return Value
undefined
Events
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.
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
Parameter | Type | Description |
---|---|---|
templateName Required | String | A template name. |
options | Object | An object holding options. |
Return Value
undefined
Events
Organizer Event
- afterAppend