Bitsmist Frameworks
Docs » Extending with organizers

Extending with organizers

Overview

The core component of BitsmistJS library “Component” has very limited functions. The components can be extended by applying organizers.

In "Create a sample component", we set the component's name and event handlers in the settings. These settings are loaded and handled by SettingOrganizer and EventOrganizer each.

Organizers have two main jobs:

  • Do processes (organize) at particular timings.
  • Add methods/properties to a component instance or to a prototype.

These organizers are applied to Component by default:

  • EventOrganizer
  • LoaderOrganizer
  • OrganizerOrganizer
  • SettingOrganizer
  • StateOraganizer
  • TemplateOrganizer

Applying organizers

To apply organizers to a component, you need to specify them in the component settings. There two ways to do so:

  • Specify them in the “organizers” section
  • Use sections that are linked to organizers

Specify in "organizers" section

Specify organizers in the “organizers” section of component settings and set True to the “attach” option. In the next example, EventOrganizer is applied to a component.

_getSettings()
{
    return {
        "organizers": {
            "EventOrganizer": {
                "settings": {
                    "attach": true
                }
            }
        }
    };
}

Use sections that are linked to organizers (Auto-loading)

Using a section that is linked to an organizer automatically applies the organizer to the component.

_getSettings()
{
    return {
        "events": {
            "this": {
                "click": "onClick"
            }
        }
    };
}

Since the “events” section is linked to EventOrganizer, EventOrganizer will be applied to the component automatically.

Refer to below for which sections are linked to which organizers.

  • Component - Settings - Sections

Organizing

Each component calls organizers at particular timings called organizer events. Organizer events has the same name as BitsmistJS user events and are triggered at the same timings. However, organizer events are designed to be triggered before user events. By applying organizers to components, the organizers are called and execute their processes.

For example, LoaderOrganizer loads additional components referencing “molds”/“components” section in settings in the “afterAppend” event that occurs after the HTML file is attached to the node.

Here is a list of organizing timings. Refer to each link for details.

TimingOrganizerDescription
beforeStartEventOrganizerBefore initialization starts.
SettingOrganizer
TemplateOrganizer
afterStartLoaderOrganizerAfter initialization finished.
afterAppendEventOrganizerAfter an HTML file is attached to a node.
TemplateOrganizer
(All)StateOrganizerExecuted in every organizer events.

Extended methods/properties

Organizers can add methods and properties to a component prototype and to component instances. These are called extended methods and extended properties.

Here is a list of extended methods/properties in the core library. Please refer to each link for more details.

OrganizerProperty/Method
EventOrganizeraddEventHandler()
getEventHandler()
initEvents()
removeEventHandler()
trigger()
triggerAsync()
LoaderOrganizercomponents
addComponent()
getLoader()
loadComponent()
loadTags()
loadSetting()
loadSettingFile()
loadTemplate()
OrganizerOrganizerorganizers
callOrganizers()
initOrganizers()
StateOrganizerstate
changeState()
waitFor()
TemplateOrganizeractiveTemplateName
templates
addTemplate()
applyTemplate()
cloneTemplate()
hideConditionalElements()
showConditionalElements()
Previous Next

© 2019-2023 Masaki Yasutake

Bitsmist Frameworks

Table of Contents

Table of Contents

  • Extending with organizers
    • Overview
    • Applying organizers
      • Specify in "organizers" section
      • Use sections that are linked to organizers (Auto-loading)
    • Organizing
    • Extended methods/properties

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