Bitsmist Frameworks
Docs » オーガナイザによる拡張

オーガナイザによる拡張

概要

BitsmistJSの核であるComponentコンポーネントはごく単純な機能しか持ちません。各コンポーネントはオーガナイザを適用することで、機能を拡張できます。

例えばサンプルのハローコンポーネントでは、コンポーネントの名前とイベントハンドラを設定でセットしましたが、これらはそれぞれSettingOrganizerとEventOrganizerによって設定が読み込まれ、処理がされています。

オーガナイザには次の機能があります

  • コンポーネントの処理中の決められたタイミングで処理を行う(オーガナイズ処理)。
  • コンポーネントのインスタンスやプロトタイプにメソッド/プロパティを追加する。

デフォルトでは以下のオーガナイザがComponentコンポーネントに適用されています。

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

オーガナイザの適用

オーガナイザを適用するには、各コンポーネントの設定に記述する必要があります。その記述方法には2つあります。

  • “organizers”設定に記述する
  • オーガナイザが担当する設定を記述する

"organizers"設定に記述する

設定の“organizers”セクションに、適用したいオーガナイザーのクラス名を記述し、“attach”設定をTrueにします。

次の例ではEventOrganizerを適用しています。

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

オーガナイザが担当する設定を記述する

設定内にオーガナイザに紐づいているセクションを使用することで、自動的に担当するオーガナイザが適用されます。

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

“events”というセクション名はEventOrganizerに紐づいているため、自動的にEventOrganizerが適用されます。

どのセクションにどのオーガナイザが紐づいているかは、以下をご覧ください。

  • コンポーネントについて - 設定 - 設定内容

オーガナイズ処理

各コンポーネントは特定のタイミング(オーガナイザイベント)でオーガナイザを呼び出す機能が備わっています。オーガナイザイベントは基本的に通常のユーザイベントと同じ名前がつけられ、同じタイミングにトリガーされます。ただし、通常はオーガナイザイベントの方がユーザイベントよりも先に発生するように設計されています。各コンポーネントにオーガナイザを適用することで、そのタイミングでオーガナイザの処理が実行されます。

例えばLoaderOrganizerは、テンプレートHTMLがノードに追加された後の“afterAppend”のタイミングで、設定内容の“molds”/“components”セクションを参照して、追加コンポーネントをロードします。

以下にどのオーガナイザがどのオーガナイザイベントで呼びだされるかを示します。各オーガナイザでどのような処理を行われるかについては、各リンク先を参照ください。

イベントオーガナイザ説明
beforeStartEventOrganizer初期化をする前のタイミングです。
SettingOrganizer
TemplateOrganizer
afterStartLoaderOrganizer初期化が完了した後のタイミングです。
afterAppendEventOrganizerテンプレートHTMLがコンポーネントにアタッチされた直後のタイミングです。
TemplateOrganizer
(全て)StateOrganizer全てのオーガナイザイベントで実行されます。

拡張メソッド/プロパティ

オーガナイザはコンポーネントのプロトタイプや各インスタンスに、プロパティやメソッドを追加する機能も持ちます。追加されたプロパティやメソッドは、それぞれ拡張プロパティ/拡張メソッドと呼びます。

以下にコアライブラリのオーガナイザの拡張プロパティ/メソッドの一覧を示します。詳細は各オーガナイザの説明をご覧ください。

オーガナイザ拡張プロパティ/メソッド
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

  • オーガナイザによる拡張
    • 概要
    • オーガナイザの適用
      • "organizers"設定に記述する
      • オーガナイザが担当する設定を記述する
    • オーガナイズ処理
    • 拡張メソッド/プロパティ

全般

  • 概要
  • インストール
  • サンプルコンポーネントを作る

コンポーネントについて

  • ロード
  • 設定
  • イベント
  • オーガナイザによる拡張

リファレンス - コンポーネント

  • Component

リファレンス - オーガナイザ

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

リファレンス - ストア

  • Store
  • ChainableStore

リファレンス - ユーティリティ

  • AjaxUtil
  • ClassUtil
  • Util