Extending with organizers

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

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

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.

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.

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.